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

Вопрос

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

Профессия

Frontend Developer

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

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

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

• Псевдоклассы :focus-visible и :focus-within для улучшения доступности и управления фокусом.
• :where() и :is() для упрощения группировки селекторов и уменьшения специфичности.
• :has() (экспериментальный) для выбора элементов, содержащих определенные потомки.
• :empty для стилизации пустых элементов.
• :not() с расширенными возможностями для исключения элементов по сложным условиям.

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

Современные псевдоклассы в CSS позволяют более точно и гибко стилизовать элементы, учитывая их состояние, структуру или содержимое. Например, псевдоклассы :focus-visible и :focus-within улучшают доступность, управляя стилями фокуса. :focus-visible применяет стили только когда фокус виден пользователю (например, при навигации с клавиатуры), а не при клике мышью. :focus-within стилизует родительский элемент, если любой из его потомков в фокусе. Это полезно для сложных форм или интерактивных компонентов. Псевдоклассы :where() и :is() упрощают группировку селекторов, уменьшая специфичность. :where() всегда имеет нулевую специфичность, что полезно для переопределения стилей, а :is() принимает специфичность самого весомого селектора в списке. :has() — экспериментальный псевдокласс, позволяющий выбирать элементы, содержащие определенные потомки. Например, можно стилизовать список, только если в нем есть изображения. :empty применяется к элементам без содержимого (включая пробелы), что полезно для скрытия пустых контейнеров. :not() теперь поддерживает несколько аргументов, например, :not(.class1, .class2), что упрощает исключение элементов по сложным условиям.

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

Пример 1

Пример :focus-visible:

text
button:focus-visible {
  outline: 3px solid blue;
}

Этот стиль применяется только при фокусе с клавиатуры, улучшая доступность.

Пример 2

Пример :is() и :where():

:is(section, article) h1 {
  color: red;
}
:where(section, article) h1 {
  margin: 0;
}

:is() сохраняет специфичность, а :where() — нет.

Пример 3

Пример :has():

div:has(> img) {
  border: 1px solid gray;
}

Стилизует div, только если внутри есть изображение.

Пример 4

Пример :empty:

div:empty {
  display: none;
}

Скрывает пустые div-элементы.

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

• Использование :focus вместо :focus-visible, что может привести к нежелательным стилям при клике мышью.
• Путаница между :is() и :where(), особенно в контексте специфичности.
• Игнорирование поддержки браузеров для :has(), который пока работает не везде.

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

• Специфичность CSS
• Доступность (a11y)
• Селекторы CSS
• Поддержка браузеров (Can I Use)

Follow-up вопросы

Как псевдокласс :focus-visible помогает улучшить доступность?

Уровень: basic

:focus-visible применяет стили только к элементам, которые получили фокус через клавиатуру, а не через мышь. Это помогает избежать ненужных визуальных эффектов для пользователей мыши, улучшая опыт для клавиатурных пользователей.

В чем разница между :where() и :is()?

Уровень: intermediate

:where() и :is() оба позволяют группировать селекторы, но :where() имеет нулевую специфичность, что упрощает переопределение стилей, в то время как :is() сохраняет специфичность самого сложного селектора в группе.

Как можно использовать :has() и в каких браузерах он поддерживается?

Уровень: advanced

:has() позволяет выбирать элементы, которые содержат определенные потомки. Это экспериментальный псевдокласс, и на момент 2023 года он поддерживается только в некоторых браузерах, таких как Safari и Chrome (с флагами).

Какие примеры использования :empty?

Уровень: intermediate

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

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

Уровень: advanced

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