Справочник урока
Псевдоклассы пишутся с одним двоеточием и выбирают элемент по состоянию или позиции. Псевдоэлементы — с двумя двоеточиями и создают виртуальную часть элемента (обязательно с content для ::before/::after).
| Инструмент | Зачем нужен | Мини-пример |
|---|---|---|
:hover | Курсор наведён на элемент | .button:hover { ... } |
:focus / :focus-visible | Элемент в фокусе (клик/Tab); -visible — только когда фокус стоит показать | .link:focus-visible { outline: 3px solid; } |
:active | Элемент в момент нажатия (кнопка зажата) | .button:active { transform: translateY(0); } |
:nth-child(n) | Выбор по позиции среди соседей (even/odd/3n) | li:nth-child(even) { ... } |
:first-child / :last-child | Первый / последний элемент в группе | li:first-child { ... } |
:checked | Отмеченный чекбокс или радио | input:checked + label { ... } |
:not() | Исключение | .nav a:not(.active) { ... } |
:is() | Группировка с обычной специфичностью | :is(h1, h2, h3) { ... } |
:where() | Группировка с нулевой специфичностью | :where(article, section) p { ... } |
::before | Декор перед содержимым (нужен content) | .badge::before { content: ''; } |
::after | Декор после содержимого (нужен content) | .link::after { content: '→'; } |
::first-line | Первая строка абзаца | p::first-line { font-weight: 700; } |
::placeholder | Текст-подсказка в поле ввода | input::placeholder { color: #64748b; } |
::selection | Выделенный пользователем текст | ::selection { background: #fde68a; } |