Structural and Functional Pseudo-Classes

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

first-child pseudo-class

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

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

last-child pseudo-class

The :last-child pseudo-class targets the last child of its parent, allowing us to modify any of its properties. Let's consider an example to illustrate how we can use this pseudo-class effectively.

nth-child pseudo-class

The :nth-child pseudo-class targets an element based on its position in the hierarchy. It takes an argument in the form of an expression, usually in the form of an+b, which helps determine the specific child elements to select. Let's break down the components of this expression:

• a represents the loop period;
• n is the loop counter, starting at 0 and increasing by 1 with each iteration;
• b is the offset, influencing the starting point of the selection.

Let's consider some typical selectors.

Note

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

not() pseudo-class

The :not() pseudo-class targets elements that do not match a specified selector. For instance, :not(p) would select all elements except for <p> elements. Let's explore some examples: