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.

/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
  /* Styles for every second element */
}

/* Selects the first three elements */
.item:nth-child(-n + 3) {
  /* Styles for the first three elements */
}

/* Selects all odd elements */
.item:nth-child(odd) {
  /* Styles for all odd elements */
}

/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
  /* Styles for the last three elements */
}

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: