Чем псевдоклассы отличаются от псевдоэлементов?

Question

Accepted Answer

## Главная мысль

**Псевдокласс** — особое *состояние* или позиция элемента; **псевдоэлемент** — «виртуальная часть» элемента, которую можно стилизовать отдельно.

## Примеры

- Псевдоклассы: `:hover`, `:focus-visible`, `:nth-child()`, `:disabled`, `:not()`.
- Псевдоэлементы: `::before`, `::after`, `::placeholder`, `::selection`, `::marker`.

```css
a:hover { text-decoration: underline; }      /* состояние */
li:nth-child(odd) { background: #f5f5f5; } /* позиция */

.quote::before { content: "«"; color: gray; } /* «часть» */
input::placeholder { opacity: 0.6; }
```

Синтаксис: один двоеточие для классов, два — для элементов (`::`). Старый `:before` ещё работает, но лучше `::before`.

## Итог

`:…` — когда/какой элемент; `::…` — кусок содержимого/оформления. Не путать на собеседовании.