Сучасне використання псевдокласів CSS

1. Стани взаємодії

Використовуються :hover, :active, :focus-visible.

2. Стани форми (кастомний чекбокс)

Зробити покупки
Написати код

Використовуються :checked, комбінатор + та псевдоелемент.

3. Структурні псевдокласи (сітка карток)

Картка 1

Непарна → фіолетова рамка.

Картка 2

Парна → зелена рамка.

Картка 3

Спеціальний стиль для третього елемента.

Картка 4

Парна → зелена рамка.

Використовуються :nth-child(even/odd), :nth-child(3).

4. Посилання

Посилання: Невідвідане | Зовнішнє (відвідане)

Використовуються :any-link, :visited, :hover.

5. Логічний псевдоклас :not()

Стиль застосовується до всіх .btn, крім тих, що мають .primary.