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.

css
Kopier kode
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Selects every second element */
.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 the last three elements */
.item:nth-last-child(-n + 3) {
  /* 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() 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: