Открыть сервис
Главная → Блог → CSS-селектор

CSS-селектор

CSS-селектор — это часть правила каскадных таблиц стилей (CSS), определяющая, к каким элементам HTML-документа будет применён набор объявленных стилей (свойств и их значений). Селекторы являются основой механизма привязки визуального оформления к структуре веб-страницы. Без селектора правило CSS не имеет смысла, так как браузер не сможет определить, какой именно элемент необходимо стилизовать.

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

Концепция селекторов была введена в спецификации CSS уровня 1 (CSS1), опубликованной Консорциумом Всемирной паутины (W3C) в 1996 году. Первая версия поддерживала лишь простейшие типы: селекторы элементов (по имени тега), идентификаторов (по атрибуту id) и классов (по атрибуту class). С развитием веба и усложнением интерфейсов возникла потребность в более гибких и точных способах выбора элементов.

Спецификация CSS2, принятая в 1998 году, значительно расширила арсенал разработчика, добавив селекторы атрибутов, псевдоклассы (например, :hover, :first-child) и псевдоэлементы (::before, ::after). Наибольший прорыв произошёл с выходом CSS3, где селекторы были выделены в отдельный модуль (Selectors Level 3). Этот модуль ввёл мощные структурные псевдоклассы, такие как :nth-child(), :not(), а также селекторы по атрибутам с частичным совпадением ([attr^=value], [attr$=value], [attr*=value]). В 2018 году был опубликован модуль Selectors Level 4, который продолжает развивать концепцию, добавляя, например, псевдокласс :has() (родительский селектор) и новые варианты псевдоклассов для работы с формами.

Типы селекторов

Все селекторы можно разделить на несколько основных категорий по способу указания целевого элемента.

Простые селекторы

  • Селектор типа (тега) — выбирает все элементы с указанным именем HTML-тега. Например, p — все абзацы, div — все блоки.
  • Селектор класса — выбирает элементы, у которых в атрибуте class присутствует указанное значение. Записывается через точку: .classname.
  • Селектор идентификатора — выбирает единственный элемент с указанным значением атрибута id. Записывается через решётку: #idname. Идентификатор должен быть уникальным в пределах страницы.
  • Универсальный селектор — выбирает все элементы на странице. Обозначается звёздочкой: *. Используется редко из-за потенциального влияния на производительность.
  • Селектор атрибута — выбирает элементы на основе наличия атрибута или его значения. Существует несколько форм записи:
  • [attr] — элемент имеет атрибут attr (любое значение).
  • [attr=value] — атрибут attr имеет точное значение value.
  • [attr~=value] — значение атрибута содержит слово value в списке, разделённом пробелами.
  • [attr|=value] — значение атрибута равно value или начинается с value-.
  • [attr^=value] — значение атрибута начинается с value.
  • [attr$=value] — значение атрибута заканчивается на value.
  • [attr*=value] — значение атрибута содержит подстроку value.

Комбинаторы

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

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

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

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

  • Динамические псевдоклассы — реагируют на действия пользователя: :hover (наведение мыши), :active (активация, например, клик), :focus (получение фокуса), :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) (аналогичен :is, но имеет нулевую специфичность), :has(selector) (выбирает родительский элемент, если он содержит потомка, соответствующего условию).

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

Псевдоэлементы позволяют стилизовать часть элемента или добавить содержимое до/после него. В CSS3 они записываются через двойное двоеточие (::) для отличия от псевдоклассов.

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

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

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

  1. Встроенные стили (атрибут style в HTML) — имеют наивысший приоритет (1,0,0,0).
  2. Идентификаторы — каждый #id добавляет 0,1,0,0.
  3. Классы, псевдоклассы и селекторы атрибутов — каждый .class, :hover, [attr] добавляет 0,0,1,0.
  4. Селекторы типов и псевдоэлементы — каждый div, ::before добавляет 0,0,0,1.
  5. **Универсальный селектор (*)** и комбинаторы (>, +, ~) не влияют на специфичность.

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

Применение и примеры

CSS-селекторы используются повсеместно при разработке веб-интерфейсов. Примеры типичных задач:

  • Стилизация всех ссылок в меню: nav a { color: blue; }
  • Выделение чётных строк таблицы: tr:nth-child(even) { background: #f2f2f2; }
  • Стилизация кнопки при наведении: button:hover { opacity: 0.8; }
  • Скрытие пустых элементов: div:empty { display: none; }
  • Выбор всех элементов с определённым атрибутом: [data-type="primary"] { border: 2px solid green; }
  • Стилизация первого абзаца статьи: article p:first-of-type { font-size: 1.2em; }

Производительность

Хотя современные браузеры оптимизируют обработку селекторов, некоторые конструкции могут замедлять рендеринг страницы, особенно на сложных сайтах с тысячами элементов. Наиболее «тяжёлыми» считаются селекторы, которые требуют от браузера обхода всего DOM-дерева или сложных вычислений, например, универсальный селектор (*), селекторы потомков с большим количеством уровней вложенности, а также псевдокласс :not() с большим списком аргументов. Рекомендуется избегать излишней вложенности и использовать классы для явной маркировки элементов.

Инструменты разработчика

Все современные браузеры предоставляют встроенные инструменты разработчика (например, «Инспектор» в Chrome DevTools или «Инспектор» в Firefox), которые позволяют просматривать применяемые к элементу стили, видеть цепочку селекторов, проверять специфичность и отлаживать каскад. Это незаменимый инструмент для работы с CSS-селекторами.

Источники

  • Спецификация CSS Selectors Level 3 (W3C Recommendation)
  • Спецификация CSS Selectors Level 4 (W3C Working Draft)
  • Документация Mozilla Developer Network (MDN) — «CSS selectors»
  • «CSS: The Definitive Guide» by Eric A. Meyer and Estelle Weyl

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →

Похожие материалы