Какие знаешь селекторы в CSS

Вопрос

Какие знаешь селекторы в CSS

Профессия

Frontend Developer

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

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

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

• Базовые селекторы: селекторы по тегу (div), классу (.class), ID (#id) и универсальный селектор (*).
• Комбинаторы: дочерние (div > p), соседние (div + p), родственные (div ~ p) и вложенные (div p).
• Атрибутные селекторы: [attr], [attr=value], [attr^=value], [attr$=value], [attr*=value].
• Псевдоклассы: :hover, :focus, :active, :nth-child(), :first-child, :last-child.
• Псевдоэлементы: ::before, ::after, ::first-line, ::first-letter.
• Селекторы состояния: :checked, :disabled, :enabled.
• Селекторы структурных псевдоклассов: :root, :not(), :empty.

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

CSS селекторы — это инструменты, которые позволяют выбирать элементы HTML для применения к ним стилей. Они делятся на несколько категорий, каждая из которых служит для решения определённых задач. Базовые селекторы включают выбор по тегу (например, div), классу (.class), ID (#id) и универсальный селектор (*), который выбирает все элементы на странице. Эти селекторы часто используются для задания общих стилей или для точного нацеливания на конкретные элементы. Комбинаторы, такие как дочерние (div > p), соседние (div + p), родственные (div ~ p) и вложенные (div p), позволяют выбирать элементы в зависимости от их положения в DOM-дереве. Например, дочерний селектор выбирает только те элементы, которые являются прямыми потомками родителя.

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

Пример 1

text
Пример 1: Использование селектора по классу для стилизации кнопки: `.button { background-color: blue; color: white; }`

Пример 2

Пример 2: Использование комбинатора для стилизации всех параграфов внутри div: `div p { font-size: 14px; }`

Пример 3

Пример 3: Использование псевдокласса :hover для изменения цвета ссылки при наведении: `a:hover { color: red; }`

Пример 4

Пример 4: Использование атрибутного селектора для стилизации ссылок с определённым атрибутом: `a[target='_blank'] { font-weight: bold; }`

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

• Типичная ошибка — использование слишком сложных селекторов, что может привести к проблемам с производительностью и поддержкой кода.
• Ещё одна ошибка — путаница между псевдоклассами и псевдоэлементами. Например, кандидаты могут неправильно использовать ::before вместо :before, что приводит к ошибкам в стилях.

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

• Связанная тема — специфичность селекторов и каскадность в CSS.
• Также стоит изучить тему современных подходов к организации CSS, таких как БЭМ или CSS-in-JS.

Follow-up вопросы

Какой селектор имеет более высокий приоритет: по классу или по ID?

Уровень: basic

Селектор по ID имеет более высокий приоритет, чем селектор по классу. Приоритеты в CSS определяются весом селекторов: ID (100) > класс (10) > тег (1).

Как можно использовать селектор :not() для исключения элементов?

Уровень: intermediate

Селектор :not() позволяет выбрать все элементы, кроме указанных. Например, div:not(.hidden) выберет все div, у которых нет класса 'hidden'.

В чем разница между псевдоклассами и псевдоэлементами?

Уровень: intermediate

Псевдоклассы (например, :hover) определяют состояние элемента, а псевдоэлементы (например, ::before) позволяют стилизовать определенные части элемента или добавлять контент.

Как работают атрибутные селекторы с частичным совпадением значений?

Уровень: advanced

Атрибутные селекторы с частичным совпадением: [attr^=value] (начинается с), [attr$=value] (заканчивается на), [attr*=value] (содержит). Например, a[href^='https'] выберет ссылки, начинающиеся с 'https'.

Какие селекторы можно использовать для стилизации элементов в зависимости от их позиции в DOM?

Уровень: intermediate

Для этого подходят структурные псевдоклассы: :nth-child(), :first-child, :last-child, :nth-of-type(). Например, li:nth-child(odd) выберет нечетные элементы списка.