Какие знаешь псевдоклассы

Вопрос

Какие знаешь псевдоклассы

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает, как использовать псевдоклассы для управления стилями элементов в зависимости от их состояния или положения в DOM. Также важно, чтобы кандидат мог привести примеры их практического применения.

Ключевые тезисы

• Псевдоклассы — это селекторы, которые позволяют выбирать элементы в зависимости от их состояния или положения в DOM.
• :hover — применяет стили, когда пользователь наводит курсор на элемент.
• :focus — применяет стили, когда элемент получает фокус (например, при клике или переходе по Tab).
• :active — применяет стили, когда элемент активирован (например, при нажатии на кнопку).
• :first-child и :last-child — выбирают первый или последний элемент внутри родителя.
• :nth-child(n) — позволяет выбирать элементы по их порядковому номеру (например, четные или нечетные).
• :not(selector) — исключает элементы, соответствующие указанному селектору.
• :checked — применяет стили к элементам формы, которые выбраны (например, чекбоксы).
• :disabled — применяет стили к отключенным элементам формы.
• :visited — применяет стили к посещенным ссылкам.

Подробный ответ

Псевдоклассы — это мощный инструмент в CSS, который позволяет выбирать элементы на основе их состояния или положения в DOM. Они начинаются с двоеточия (:), например, :hover, :focus, :active. Эти селекторы помогают создавать интерактивные и доступные интерфейсы, реагируя на действия пользователя. Например, :hover применяет стили при наведении курсора, а :focus — когда элемент получает фокус (например, поле ввода при клике или переходе по Tab).

Некоторые псевдоклассы связаны со структурой DOM. Например, :first-child и :last-child выбирают первый и последний дочерние элементы внутри родителя, а :nth-child(n) позволяет выбирать элементы по их порядковому номеру (например, четные или нечетные). Также полезны псевдоклассы для форм, такие как :checked (для выбранных чекбоксов), :disabled (для отключенных элементов) и :valid/:invalid (для валидации).

Псевдокласс :not() позволяет исключать элементы, соответствующие указанному селектору. Например, можно применить стили ко всем кнопкам, кроме тех, у которых есть класс .disabled. Важно понимать, что :not() можно комбинировать с другими селекторами для более точного выбора элементов.

Некоторые псевдоклассы, такие как :first-of-type и :last-of-type, работают аналогично :first-child и :last-child, но учитывают тип элемента. Например, :first-of-type выберет первый элемент определенного типа (например, первый <p> в родителе), даже если перед ним есть другие элементы другого типа.

Практические примеры

Пример 1

Пример 1: Стилизация кнопки при наведении и активации:

text
button:hover { background-color: #f0f0f0; }
button:active { transform: scale(0.98); }

Пример 2

Пример 2: Выбор каждого третьего элемента в списке:

li:nth-child(3n) { color: red; }

Пример 3

Пример 3: Стилизация неактивных полей формы:

input:disabled { opacity: 0.5; cursor: not-allowed; }

Пример 4

Пример 4: Исключение определенных элементов:

div:not(.exclude) { border: 1px solid #000; }

Частые ошибки

• Путаница между :first-child и :first-of-type. Например, :first-child выберет первый элемент только если он является первым ребенком родителя, а :first-of-type выберет первый элемент определенного типа, даже если перед ним есть другие элементы.
• Использование :hover для элементов, которые не могут быть наведены (например, на мобильных устройствах без курсора).
• Неправильное использование :nth-child, например, путаница между :nth-child(2n) (четные элементы) и :nth-child(2n+1) (нечетные элементы).

Связанные темы

• Псевдоэлементы (например, ::before и ::after)
• CSS-селекторы (классы, ID, атрибуты)
• Специфичность в CSS
• Доступность (a11y) и использование псевдоклассов для улучшения UX

Follow-up вопросы

Можешь объяснить разницу между :hover и :focus?

Уровень: basic

:hover срабатывает при наведении курсора, а :focus — когда элемент получает фокус (например, через Tab или клик). Например, кнопка может менять цвет при наведении (:hover) и иметь контур при фокусе (:focus).

Как использовать :nth-child() для выбора каждого третьего элемента?

Уровень: intermediate

Можно указать :nth-child(3n), где 'n' — это счетчик, начиная с 0. Например, li:nth-child(3n) выберет 3-й, 6-й, 9-й элементы и т.д.

Какие псевдоклассы связаны с формами и их состояниями?

Уровень: intermediate

Примеры: :checked (выбранные чекбоксы/радио), :disabled (отключенные поля), :valid/:invalid (валидные/невалидные данные), :required (обязательные поля). Они помогают стилизовать элементы в зависимости от взаимодействия пользователя.

Как работает :not() и можно ли комбинировать его с другими селекторами?

Уровень: advanced

:not() исключает элементы, соответствующие селектору внутри скобок. Например, div:not(.hidden) выберет все div, кроме тех, у которых класс 'hidden'. Можно комбинировать: button:not(:disabled):hover.

Зачем нужны :first-of-type и :last-of-type, если есть :first-child?

Уровень: advanced

:first-child выбирает первый элемент внутри родителя, независимо от типа, а :first-of-type — первый элемент конкретного типа (например, первый <p> среди других тегов). Это полезно в разнородных контейнерах.