Hey Folks! My Name is Garvit Motwani and In This article I will tell you all the CSS Selectors you should know.
The Basic Ones
Universal - *
- Selects all the elements
Type - example -: div
- Selects all the elements of that type
Class - .class-name
- Selects all the elements with that class.
Id - #id-name
- Selects all the elements with that id.
Combination Selectors
Descendant - div p
- Selects the elements that are desendant of the first element.
Direct Child - div > p
- Selects elements that are direct children of the first element.
General Sibling - div ~ p
- Select elements that are siblings of the first element and come after the first.
Adjacent Sibling - div + p
- Selects elements that are siblings of the first element and come directly after the first element.
Or - div, p
- Select elements that match any selector in the list
And - div.class-name
- Select elements that match all the selector combinations
Attribute
Has - [a]
- Select elements that have that attribute
Exact - [a="1"]
- Select elements that have that attribute with exactly that value
Begins With - [a^="1"]
- Select elements that have that attribute which start with that value.
Ends With - [a$="1"]
- Select elements that have that attribute which end with that value
Substring - [a*="1"]
- Selects elements that have that attribute which contains that value anywhere
Pseudo Element
Before - div::before
- Creates an empty element directly before the children of selected element.
After - div::after
- Creates an empty element directly after the children of the selected element.
Pseudo Class
Hover - button:hover
- Select elements that are hovered by the mouse.
Focus - button:focus
- Select elements that are focused.
Required - input:required
- Select inputs that are required.
Checked - input:checked
- Select checkboxes/radio buttons that are checked.
Disabled - input:disabled
- Select inputs that are disabled.
First Child - a:first-child
- Select elements that are the first child in a parent element.
Last Child - a:last-child
- Select elements that are the last child in a parent element.
Nth Child - a:nth-child(2n)
- Select elements that are the nth child inside a container based on the formula.
Nth Last Child - a:nth-last-child(3)
- Select elements that are the nth child inside a container based on the formula counting from the end.
Only Child - a:only-child
- Select elements that are the only child inside the container.
First Of Type - a:first-of-type
- Select elements that are the first of a type inside a container
Last Of Type - a:last-of-type
- Select elements that are the last of a type inside a container
Nth Of Type - a:nth-of-type(2n)
- Select elements that are the nth of a type inside a container based on the formula.
Nth Last Of Type - a:nth-last-of-type(2)
- Select elements that are the nth of a type inside a container based on the formula counting from the end.
Only Of Type - a:only-of-type
- Select elements that are the only of a type inside a container
Not - a:not(.class-name)
- Select all elements that do not match the selector inside the not selector.
If I Missed A Selector Type It Out In The Discussion or DM Me on My Twitter.
Top comments (0)