Ці псевдокласи відносяться до позиції елемента в ієрархічній структурі документа.

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.

Псевдоклас last-child

Псевдоклас :last-child націлений на останній дочірній клас свого батька, дозволяючи нам змінювати будь-які його властивості. Розглянемо приклад, щоб проілюструвати, як можна ефективно використовувати цей псевдоклас.

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.

Псевдоклас not()

Псевдоклас :not() вибирає елементи, які не відповідають заданому селектору. Наприклад, :not(p) виділить усі елементи, окрім елементів <p>. Давайте розглянемо кілька прикладів:

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:

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: