Урок 12. Справочник: все варианты

📁 Раздел: Состояния и темы ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

Состояния: hover focus focus-visible active disabled checked. Зависимости: group-*, peer-*, has-*. Атрибуты: data-[…], aria-*.

Состояния элемента

Вариант	CSS	Где применяют
`hover:`	`:hover`	кнопки, ссылки, строки таблицы
`focus:`	`:focus`	поля ввода
`focus-visible:`	`:focus-visible`	кнопки и ссылки — доступный фокус
`focus-within:`	`:focus-within`	обёртка поля с иконкой
`active:`	`:active`	эффект нажатия
`visited:`	`:visited`	посещённые ссылки
`disabled:`	`:disabled`	выключенные элементы
`checked:`, `indeterminate:`	`:checked`	чекбоксы и радио
`required:`, `invalid:`, `read-only:`	валидация формы	поля ввода
`placeholder:`	`::placeholder`	цвет подсказки
`selection:`	`::selection`	выделенный текст
`file:`	`::file-selector-button`	кнопка выбора файла
`marker:`	`::marker`	маркеры списка
`before:`, `after:`	псевдоэлементы	декоративные детали

Вариант	Смысл	Пример
`group` + `group-hover:`	состояние предка	иконка меняется при наведении на карточку
`group-focus-within:`	фокус внутри предка	подсветка блока формы
`group-has-[a]:`	у предка есть потомок	карточка со ссылкой внутри
`group/name` + `group-hover/name:`	именованная группа	вложенные группы
`peer` + `peer-checked:`	состояние соседа выше по разметке	переключатель
`peer-disabled:`, `peer-focus:`	то же для других состояний	подпись поля
`has-[:checked]`, `has-checked:`	содержимое элемента	карточка выбора тарифа
`in-focus:`	элемент внутри сфокусированного предка	подсветка группы

Вариант	Условие
`data-[state=open]:`	атрибут `data-state="open"`
`data-active:`	наличие `data-active`
`aria-expanded:`, `aria-selected:`, `aria-invalid:`	ARIA-атрибуты
`open:`	открытый `<details>` или диалог
`target:`	элемент — цель якоря в адресе
`first:`, `last:`, `only:`	позиция среди соседей
`odd:`, `even:`, `nth-3:`	чётность и номер
`empty:`	элемент без содержимого
`:`, `*:`	прямые дети / все потомки
`not-hover:`, `not-first:`	отрицание условия

Вариант	Условие
`dark:`	тёмная тема (урок 13)
`motion-reduce:`, `motion-safe:`	настройка анимаций в системе
`pointer-coarse:`, `pointer-fine:`	сенсорный или точный ввод
`print:`	печать страницы
`supports-[…]:`	поддержка свойства браузером
`starting:`	начальное состояние для анимации появления

Полный перечень с примерами — в справочнике «Модификаторы».