CSS selectors are a pattern used to select HTML elements you want to manipulate. They are very useful and the more you know about them the easier it is to target HTML elements.
We can think of using them in order to apply CSS rules and also to add manipulate them using JavaScript.
(*) Star selector
The star selector selects every single element on the page or in the element you are searching within.
Figure 1. Browser console output.
(X) Type selector
The type selector selects every single element on the page that is of type X.
(#) Id selector
The id selector selects a single element on the page based on its unique id.
(.) Class selector
The class selector selects every single element on the page that has the given class applied.
(X Y) Descendant selector (Direct and indirect children)
The descendant selector selects every children element Y of X, and it can be either direct or indirect children.
(X > Y) Descendant selector (Direct children only)
The descendant selector (>) selects only every direct children of X that is a Y element.
(X + Y) Adjacent selector
The adjacent selector (+) selects every direct sibling of X that is a Y element.
(X ~ Y) Adjacent selector
The adjacent selector (~) selects all siblings of X that is a Y element.
(X:pseudo-class) Pseudo-class selector
Pseudo-classes selectors bring a lot of power to the table. Let’s say you need to select the 5th div on a page, div:nth-of-type(5) will do the trick. Find below a list of pseudo-classes selectors:
X:checked
X:after
X:before
X:hover
X:not(selector)
X:nth-child(n)
X:nth-last-child(n)
X:nth-of-type(n)
X:nth-last-of-type(n)
X:first-child
X:last-child
(X[title]) Attributes selector
Attribute selectors allows us to select HTML elements based on its attributes. Let’s say we need to select all text inputs on our page, then we would use something like input[type=text]. Find more selectors below: