These pseudo-classes pertain to the position of an element in the document's hierarchical structure.

first-child pseudo-class

:first-child targets an element that is the first child of its parent element, regardless of its tag name or class name. Let's consider the following example to make it clear. We have a set of some elements and only for the first element (first <li> element) we need to make its color property equals to blue.

We see that the first element was selected, and only for it we change the color property.

last-child pseudo-class

:last-child targets the last child and we can change any its property.

nth-child pseudo-class

:nth-child targets the element based on its position in the hierarchy. It accepts an argument in the form of an expression, which determines which child elements to select. We use an+b loop.

• a is loop period;
• n is loop counter, starts with 0 and increases by 1 on each iteration;
• b is offset;

Let's consider some typical selectors.

Note

We don't need to remember all the selectors. We can always search it in Google.

not() pseudo-class

:not() targets elements that do not match a given selector. For example, :not(p) would match all elements that are not <p> elements. Let's run the next examples: