Селекторы CSS¶

Селекторы CSS — это шаблоны, используемые в каскадных таблицах стилей (CSS) для выбора одного или нескольких элементов HTML-документа, к которым применяются определённые стилевые правила. Селекторы определяют, какие именно элементы на веб-странице будут стилизованы, и являются основой для связывания структуры документа (HTML) с его визуальным представлением (CSS). Механизм селекторов реализован в соответствии со спецификацией W3C Selectors Level 3 (CSS3) и более поздними версиями.

¶История и развитие

Селекторы появились одновременно с первой версией CSS, предложенной Хоконом Виум Ли и Бертом Босом в 1996 году. В CSS1 были доступны простые селекторы: по типу элемента, по классу, по идентификатору, а также контекстные селекторы (потомков). Спецификация CSS2, опубликованная в 1998 году, расширила возможности за счёт селекторов атрибутов, псевдоклассов и псевдоэлементов. Ключевым этапом стала спецификация Selectors Level 3 (2009–2011 годы), которая ввела комбинаторы (соседние и дочерние селекторы), новые псевдоклассы (например, :nth-child()), а также селекторы по отрицанию (:not()). В 2018 году была опубликована спецификация Selectors Level 4, которая добавила псевдоклассы :is(), :where(), :has() и другие, а также расширила синтаксис псевдоэлементов.

¶Основные типы селекторов

Селекторы CSS классифицируются по способу сопоставления с элементами HTML. В современных браузерах поддерживаются все основные типы, описанные в спецификациях CSS3 и CSS4.

¶Селекторы по типу элемента (тегу)

Селектор по типу сопоставляется с именем HTML-тега. Например, селектор p выбирает все абзацы <p>, а div — все блоки <div>. Это самый простой и широко используемый тип.

``css p { color: red; } ``

¶Селекторы по классу

Селектор по классу выбирает элементы, у которых в атрибуте class указано соответствующее значение. В CSS класс обозначается точкой перед именем: .classname. Один элемент может иметь несколько классов, разделённых пробелами.

``css .highlight { background-color: yellow; } ``

¶Селекторы по идентификатору

Селектор по идентификатору выбирает элемент с указанным значением атрибута id. Идентификатор должен быть уникальным в пределах документа. В CSS обозначается символом решётки: #idname.

```css

¶header {

font-size: 24px; } ```

¶Селекторы атрибутов

Селекторы атрибутов позволяют выбирать элементы на основе наличия атрибута или его значения. Существует несколько вариантов синтаксиса:

• [attr] — элемент имеет атрибут attr (любое значение).
• [attr="value"] — точное совпадение значения.
• [attr~="value"] — значение содержит слово value в списке, разделённом пробелами.
• [attr^="value"] — значение начинается с value.
• [attr$="value"] — значение заканчивается на value.
• [attr*="value"] — значение содержит подстроку value.
• [attr|="value"] — значение равно value или начинается с value-.

Пример: ``css a[href^="https"] { color: green; } ``

¶Комбинаторы

Комбинаторы связывают несколько простых селекторов, указывая на отношения между элементами в DOM-дереве.

• Потомок (пробел) — выбирает элементы, являющиеся потомками (любого уровня вложенности) указанного родителя. Например, div p выбирает все <p>, находящиеся внутри <div>.
• Дочерний (>) — выбирает только прямых потомков. Например, ul > li выбирает <li>, которые являются непосредственными детьми <ul>.
• Соседний (+) — выбирает элемент, который непосредственно следует за указанным элементом. Например, h2 + p выбирает первый абзац после каждого заголовка <h2>.
• Общий соседний (~) — выбирает все элементы, которые следуют за указанным элементом и имеют общего родителя. Например, h2 ~ p выбирает все абзацы, идущие после <h2>.

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

Псевдоклассы определяют особое состояние элемента или его положение в структуре документа. Они начинаются с двоеточия (:). Основные группы:

• Динамические псевдоклассы: :hover (при наведении мыши), :focus (при фокусе), :active (в момент активации), :visited (посещённая ссылка).
• Структурные псевдоклассы: :first-child, :last-child, :nth-child(n), :nth-of-type(n), :only-child, :empty.
• Псевдоклассы состояния: :enabled, :disabled, :checked, :required, :valid, :invalid (для элементов форм).
• Псевдоклассы отрицания и логики: :not(selector), :is(selector), :where(selector), :has(selector).

Пример: ``css li:nth-child(odd) { background-color: #f0f0f0; } ``

¶Псевдоэлементы

Псевдоэлементы позволяют стилизовать определённые части элемента или создавать виртуальные элементы, не существующие в DOM. Они обозначаются двойным двоеточием (::). Основные:

• ::before — вставляет контент перед содержимым элемента.
• ::after — вставляет контент после содержимого элемента.
• ::first-line — стилизует первую строку текста.
• ::first-letter — стилизует первую букву.
• ::selection — стилизует выделенный пользователем текст.

Пример: ``css p::first-letter { font-size: 2em; font-weight: bold; } ``

¶Специфичность и каскад

Специфичность (вес) селектора определяет, какое правило будет применено, если несколько правил конфликтуют. Расчёт специфичности производится по четырём уровням (в порядке убывания приоритета):

1. Встроенные стили (атрибут style в HTML) — имеют наивысший приоритет.
2. Идентификаторы — каждый #id добавляет 0,1,0,0.
3. Классы, псевдоклассы, атрибуты — каждый .class, :pseudo, [attr] добавляет 0,0,1,0.
4. Типы элементов и псевдоэлементы — каждый tag, ::pseudo добавляет 0,0,0,1.

При равенстве специфичности применяется правило, объявленное позже в коде. Правило с !important переопределяет все обычные правила, но его использование не рекомендуется.

¶Производительность и оптимизация

Браузеры обрабатывают селекторы справа налево. Например, для селектора div p a браузер сначала находит все ссылки <a>, затем проверяет, находятся ли они внутри <p>, и только потом — внутри <div>. Поэтому для повышения производительности рекомендуется:

• Избегать слишком глубоких селекторов (более 3–4 уровней).
• Использовать селекторы по классам вместо длинных цепочек потомков.
• Избегать универсального селектора * в комбинации с другими селекторами.
• Предпочитать селекторы по ID и классу селекторам по тегу.

¶Применение в современных веб-технологиях

Селекторы CSS используются не только в классических таблицах стилей, но и в:

• JavaScript — методы querySelector() и querySelectorAll() принимают CSS-селекторы для поиска элементов в DOM.
• Препроцессоры CSS (Sass, Less) — поддерживают вложенность селекторов и наследование.
• Фреймворки (React, Vue, Angular) — часто используют CSS-модули или CSS-in-JS, где селекторы применяются в ограниченной области видимости.
• Тестирование — инструменты вроде Selenium и Cypress используют CSS-селекторы для поиска элементов на странице.

¶Ограничения и особенности

• Селекторы не могут выбирать элементы на основе их содержимого (текста) или позиции относительно других элементов, не являющихся предками или соседями.
• Псевдокласс :has() (CSS Selectors Level 4) позволяет выбирать родительский элемент, содержащий определённый дочерний элемент, но его поддержка в браузерах ограничена (по состоянию на 2024 год поддерживается в большинстве современных браузеров, кроме некоторых старых версий).
• Селекторы не чувствительны к регистру для имён тегов HTML (в режиме без XHTML), но чувствительны для имён классов и идентификаторов.

¶Источники

• Спецификация W3C Selectors Level 3 (CSS3)
• Спецификация W3C Selectors Level 4 (CSS4)
• MDN Web Docs: CSS Selectors
• «CSS: The Definitive Guide» by Eric A. Meyer (O'Reilly Media)
• «CSS Pocket Reference» by Eric A. Meyer