Продолжаем изучать псевдоклассы. В этой части разберём более сложные и мощные инструменты для выборки элементов.

1. :nth-child() — выбор по порядковому номеру

Выбирает элементы по их порядковому номеру внутри родителя.

Возможные значения:

• Число: 2 (второй элемент)
• odd — нечётные элементы
• even — чётные элементы
• Формула: 2n (чётные), 2n+1 (нечётные), 3n (каждый третий)
• Формула со смещением: n+3 (с третьего элемента), -n+3 (первые три)

Пример 1: каждый второй элемент (чётные)

li:nth-child(even) {
    background-color: #f0f0f0;
}

Пример 2: каждый третий элемент

li:nth-child(3n) {
    background-color: #14b8a6;
    color: white;
}

Пример 3: первые три элемента

li:nth-child(-n+3) {
    font-weight: bold;
}

2. :nth-of-type() — выбор по типу и порядку

Отличие от :nth-child: считает только элементы одного типа (например, только <p>).

p:nth-of-type(2) {
    background-color: #14b8a6;
    color: white;
}

3. :not() — исключение элементов

Выбирает все элементы, которые не соответствуют селектору внутри скобок.

li:not(.special) {
    opacity: 0.5;
}

4. :is() — группировка селекторов

Позволяет группировать селекторы, сокращая код.

Без :is() (нужно перечислять каждый селектор):

h1.special, h2.special, h3.special {
    color: #14b8a6;
}

С :is() (группируем заголовки):

:is(h1, h2, h3).special {
    color: #14b8a6;
}

5. :where() — группировка с нулевой специфичностью

Работает как :is(), но имеет нулевой вес — его легко переопределить.

:where(h1, h2, h3).special {
    color: #14b8a6;
}

Сравнение :is() и :where() на примере

Представьте, что у вас есть правило, которое должно применяться ко всем заголовкам, но потом вы хотите переопределить цвет для одного из них.

С :is() — переопределить сложнее

:is(h1, h2, h3).special {
    color: #14b8a6;  /* этот стиль имеет вес 10 (класс) */
}
h2.special {
    color: #ffc107;  /* этот стиль тоже имеет вес 10 (класс) — не перебивает */
}

С :where() — переопределить легко

:where(h1, h2, h3).special {
    color: #14b8a6;  /* этот стиль имеет вес 0 (нулевая специфичность) */
}
h2.special {
    color: #ffc107;  /* этот стиль имеет вес 10 (класс) — перебивает */
}