Advanced CSS selectors
Selection of a direct child element
#parent > .child
Select the elements with the class child
that are direct children of the element with the identifier parent
.
Use case: several nested elements - e. g. menus - but only the first level is selected.
Selection of an adjacent element (or sibling element)
.abel + .cain
We select the elements with the class cain
that follow elements with the class abel
.
Use case: try to select an element that is systematically after another, but difficult to point effectively by itself.
Selection of the n-th element (of an implicit direct parent)
To select an element by its position within its parent, you can use :nth-child()
(means “n-th child element”) with, as a parameter, the position of the element to select.
Example:
a:nth-child(2)
Selects all the links that are the second child of their direct parent.
Selection of an element with exclusion
To select an item provided it does not match another simple selector, you can use :not()
with the selector to exclude as a parameter.
Example:
a:not(.excluded)
Selects all links that do not have the exclude
class.
Other selectors
There are many CSS selectors and new ones are regularly added: we recommend “Learn more” section of MDN documentation.
TIP
CSS still does not allow you to select an element according to its textual content, nor to select a parent element according to its children. For these purposes, you can use XPATH selectors.