Using Structural and Functional Pseudo-Classes

Pseudo-classes allow you to target elements precisely based on their order within a container. Let's explore some of the most commonly used ones.

:first-child

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.

Output

Only the first faq item was selected, and specific styles were applied.

:last-child

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.

Output

:nth-child

The :nth-child pseudo-class allows you to select elements based on their position within a list of siblings. You can start with simple targeting by specifying a number. For example:

Output

The accent styles were applied only for the selected elements (2nd and 3rd).

Advanced :nth-child

For more complex scenarios, you can use the formula an+b to select multiple elements based on their position. Here's how the formula works:

• a determines the repetition pattern (e.g., every 2nd, 3rd child, etc.);
• b sets the starting point or offset for the selection;
• n acts as the counter that increments with each iteration, starting at 0.

Let's consider some typical selectors.

css
Copia codice

Note

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

:not()

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: