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

Вопрос

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

Профессия

Frontend Developer

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

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

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

• Базовые селекторы: включают селекторы по тегу (например, div), классу (.class) и ID (#id).
• Комбинаторы: включают селекторы потомков (div p), дочерние (div > p), соседние (div + p) и соседние общие (div ~ p).
• Атрибутные селекторы: позволяют выбирать элементы по атрибутам ([attr], [attr=value], [attr^=value] и т.д.).
• Псевдоклассы: селекторы, которые определяют состояние элемента (:hover, :focus, :nth-child(n)).
• Псевдоэлементы: позволяют стилизовать часть элемента (::before, ::after, ::first-line).
• Селекторы групп: позволяют применять стили к нескольким селекторам одновременно (div, .class, #id).

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

Селекторы в CSS — это инструменты, которые позволяют выбирать элементы HTML для применения к ним стилей. Они делятся на несколько категорий. Базовые селекторы включают селекторы по тегу (например, div), классу (.class) и ID (#id). Селекторы по тегу применяются ко всем элементам указанного типа, классы — к элементам с соответствующим атрибутом class, а ID — к уникальным элементам с атрибутом id. Комбинаторы позволяют выбирать элементы на основе их взаимного расположения в DOM. Например, селектор потомков (div p) выбирает все p внутри div, а дочерний селектор (div > p) — только непосредственные дочерние элементы p. Атрибутные селекторы ([attr], [attr=value]) позволяют выбирать элементы по наличию или значению атрибутов. Псевдоклассы (:hover, :nth-child(n)) определяют состояние элемента, а псевдоэлементы (::before, ::after) — его части. Селекторы групп (div, .class, #id) применяют стили к нескольким селекторам одновременно.

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

Пример 1

Пример базовых селекторов:

div { color: blue; }
.class { font-weight: bold; }
#id { background: yellow; }

Пример 2

Пример комбинаторов:

div p { margin: 10px; } /* все p внутри div */
div > p { padding: 5px; } /* только дочерние p */
div + p { border: 1px solid; } /* первый соседний p после div */
div ~ p { color: red; } /* все соседние p после div */

Пример 3

Пример атрибутных селекторов:

[disabled] { opacity: 0.5; } /* все disabled элементы */
[type='text'] { border: 1px solid #ccc; } /* input с type='text' */
[href^='https'] { color: green; } /* ссылки, начинающиеся с https */

Пример 4

Пример псевдоклассов и псевдоэлементов:

a:hover { text-decoration: underline; }
p::first-line { font-size: 1.2em; }
button::before { content: '→'; }

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

• Использование ID-селекторов для стилизации, что снижает гибкость кода из-за их высокой специфичности.
• Путаница между комбинаторами + и ~. Первый выбирает только следующий соседний элемент, а второй — все последующие соседние элементы.
• Игнорирование необходимости свойства content для псевдоэлементов ::before и ::after, что делает их невидимыми.

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

• Специфичность CSS: как браузер определяет, какие стили применять при конфликте.
• Каскадность CSS: порядок применения стилей при наличии нескольких правил.
• CSS-переменные: использование кастомных свойств для удобного управления стилями.

Follow-up вопросы

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

Уровень: basic

ID селектор (#id) имеет наивысший приоритет, затем идут классы (.class), а теги (div) — самый низкий. Важен порядок и специфичность.

Как работает комбинатор ~ (тильда) в CSS? Приведи пример.

Уровень: intermediate

Комбинатор ~ выбирает все соседние элементы после указанного. Например, div ~ p применит стили ко всем <p>, которые идут после <div> на одном уровне вложенности.

Какие псевдоклассы используются для стилизации форм?

Уровень: intermediate

:checked, :disabled, :focus, :valid/:invalid — псевдоклассы для работы с состояниями полей форм. Например, input:invalid { border-color: red; } подсветит невалидные поля.

Как селектор [attr^='value'] отличается от [attr*='value']?

Уровень: advanced

[attr^='value'] выбирает элементы, где атрибут начинается с 'value', а [attr*='value'] — где 'value' встречается в любом месте атрибута. Например, a[href^='https'] vs a[href*='example'].

Зачем нужны псевдоэлементы ::before и ::after? Можно ли их использовать без content?

Уровень: intermediate

Они добавляют декоративные элементы в DOM. Без свойства content псевдоэлементы не отобразятся, даже если заданы другие стили (content: '' — обязательно).