Приведите пример псевдокласса. Для чего его используют?

Question

Accepted Answer

## Начнём с основы
**Псевдокласс** выбирает элемент в особом состоянии, которого нет отдельным тегом в дереве: `:hover`, `:focus-visible`, `:nth-child`, `:disabled`, `:not()`.

## Use case

```css
.button:hover { background: #222; }
.button:focus-visible { outline: 2px solid #4af; }
input:invalid { border-color: crimson; }
```

`:hover` — обратная связь мыши; `:focus-visible` — клавиатурный фокус без лишнего кольца на клик; `:nth-child(odd)` — зебра в таблице.

Не путать с **псевдоэлементами** `::before` / `::after` — они создают виртуальные куски бокса.

## Итог
Псевдоклассы стилизуют состояния и структурные позиции без лишних классов в разметке.