#14 CSS для начинающих | Псевдоклассы child, not, hover, focus и focus-visible, active, disabled

YOUTUBE · 28.11.2025 04:38

Ключевые темы и таймкоды

Введение в псевдоклассы

0:00

Псевдоклассы — это специальные селекторы для элементов, удовлетворяющих определённым условиям.
Примеры условий: элемент является вторым среди соседних, не содержит определённый класс, находится в состоянии наведения курсора или фокусировки.

Псевдоклассы child

0:34

Псевдоклассы child позволяют выбирать элементы по их положению среди соседних.
Примеры использования: `p:first-child`, `p:last-child`, `p:nth-child(odd)` для выбора нечётных элементов, `p:nth-child(even)` для чётных элементов.
Формулы для выбора конкретных элементов: `p:nth-child(2)` для второго элемента, `p:nth-last-child(3)` для третьего элемента с конца.

Псевдокласс not

3:27

Псевдокласс not инвертирует условия в селекторе, выбирая элементы, не удовлетворяющие заданным условиям.
Пример использования: `p:not(:last-child)` для выбора всех элементов, кроме последнего.
Применение в стилизации: скрытие элемента с классом `tooltip` при отсутствии класса `active`.

Псевдоклассы состояний

5:27

Псевдоклассы состояний реагируют на взаимодействие пользователя с элементом.
Примеры состояний: `hover` наведение курсора, `focus` фокус, `active` клик, `disabled` невозможность взаимодействия.
Важность добавления эффектов наведения на интерактивные элементы для улучшения пользовательского интерфейса.

Псевдокласс checked

8:24

Псевдокласс checked применяется к отмеченным чекбоксам и радиокнопкам.
Динамичность состояния checked: при нажатии на чекбокс галочка исчезает, состояние checked теряет силу.
Сложности стилизации чекбоксов и радиокнопок из-за ограничений браузерных стилей.

Стилизация чекбоксов

9:21

Использование лейбла, инпута, спана для эмуляции чекбокса и текста.
Применение класса `visually-hidden` для визуального скрытия инпута без потери возможности взаимодействия.
Добавление псевдоэлемента `::before` с символом галочки для неотмеченных чекбоксов.

Разбор селектора для чекбокса

10:55

Обращение к инпуту через класс `check-box-control`.
Использование псевдокласса `not` для конкретизации состояния инпута.
Применение смежного селектора `+` для обращения к следующему элементу с классом `check-box-emulator`.
Обращение к псевдоэлементу `check-box-emulator` для скрытия галочки, если инпут не в состоянии `checked`.
Аналогичная реализация для радиокнопки с заменой атрибута `type` на `radio` и изменением отображения галочки на круги.

Заключение и анонс следующего занятия

11:45

Обзор псевдоклассов группы `child` и состояний `hover`, `active`, `focus` и других.
Анонс следующего занятия по теме `grid` и `grid-layout`.
Призыв подписаться на канал для получения новых материалов.
Благодарность за просмотр и прощание.