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

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

Что из себя представляют селекторы атрибутов?

Селекторы атрибутов – это отдельный тип CSS селекторов, выбирающих элементы на основании атрибутов или их значений. 

Для тех, кто еще только начинает изучать HTML, атрибуты – это специальные слова, которые используют в открывающих тегах, чтобы указывать определенные свойства элементов. Атрибут состоит из названия и значения: name=”value”. Значение (value) всегда заключено в кавычки, но некоторые атрибуты используются без значения. Такие атрибуты называются Булевыми, наиболее часто используемые из них – checked, disabled, readonly, required, и т.д.

Селекторы атрибутов можно разделить на несколько типов, которые отличаются друг от друга синтаксисом, но при этом следуют общим правилам CSS, где сначала идет селектор, а после него – фигурные скобки, внутри которых записывают свойства. Рассмотрим различные типы селекторов по атрибуту.

[attribute]

Этот тип селекторов используется, чтобы выбрать все элементы, у которых есть определенный атрибут, и применить к ним необходимые стили. В примере ниже каждый <a> элемент с href атрибутом окрашивается в красный цвет:

a[href] {
  color: red;
}

[attribute=“value”]

Этот тип селекторов по атрибуту позволяет применить стили ко всем элементам, у которых есть определенный атрибут, значение (value) которого точно соответствует указанному в селекторе. Пример ниже показывает, как выбрать все <a> элементы с href=”#” атрибутом:

a[href="#"] {
  color: purple;
}

[attribute~=“value”]

Такие селекторы используются, чтобы выбрать все элементы, у которых присутствует указанный атрибут. И у этого атрибута одно из значений (которые могут быть перечислены через пробел) соответствует указанному value.

Пример ниже демонстрирует, как можно выбрать все элементы, у которых атрибут class содержит список значений, разделенных пробелами, одно из которых – dogs:

div[class~="dogs"] {
  color: brown;
}

Селектор в данном примере найдет элементы с class=“dogs”, class=“animals dogs” и class=“dogs animals” но не class=“dogs-animals”.

[attribute|=“value”] 

Этот тип селекторов атрибутов используется для выбора всех элементов с атрибутом class, значение которых либо в точности равно value, либо начинается с value, причем после value обязательно должен стоять дефис, “dogs-purebred”:

div[class|="dogs"] {
  color: royal blue;
}

[attribute^=”value”] 

Такие селекторы используются, чтобы стилизовать все элементы, у которых имеется определенный атрибут, а его значение начинается со значения, указанного в селекторе. Пример ниже применит стили к каждому элементу с атрибутом class, у которого значение начинается на “seek”.

div[class^="seek"] {
  font-style: italic;
}

[attribute$=”value”]

Этот селектор фактически противоположный селектору [attribute^=”value”] и используется, чтобы выбрать все элементы, у которых есть необходимый атрибут с value, которое оканчивается на значение, указанное в селекторе. В примере ниже будут выбраны все элементы с атрибутом class со значением, заканчивающимся на “er”.

div[class$="er"] {
  font-style: oblique;
}

[attribute*=“value”] 

Этот тип селекторов атрибутов используется для выбора элементов, у которых в value конкретного атрибута присутствует указанное значение, не важно где именно. Пример ниже позволяет стилизовать каждый элемент, у которого есть атрибут class, содержащий “and” в любом месте строки значения атрибута.

div[class*="and"] {
  font-weight: bold;
}

[attribute operator value i] 

Этот тип селекторов позволяет расширить функционал любого из перечисленных выше селекторов, добавив i или I сразу перед закрывающей квадратной скобкой. Таким образом сравнение значений атрибутов будет проводиться без учета регистра. Подобные селекторы поддерживаются всеми браузерами, кроме Internet Exporer.

В примере ниже все теги с href=”anon” будут выбраны, вне зависимости от того, заглавными или строчными буквами будет написано anon в самих тегах. Поэтому если у элементов значение атрибута href будет равняться Anon, aNon, или любой другой вариант с теми же буквами, но другим регистром, селектор по-прежнему сработает на таких элементах.

a[href*="anon" i] {
  color: yellow;
}

[attribute operator value s] 

Такой селектор фактически противоположен селектору [attribute operator value i]. Он сравнивает значения, указанные в атрибутах, с точностью до регистра. Этот селектор пока что не работает в большинстве браузеров. В примере ниже будут стилизованы все теги с href*=”AnOn”, с точностью до регистра.

a[href*=AnOn s] {
  color: pink;
}

Почему вам стоит использовать Селекторы Атрибутов?

Если вы работали какое-то время с CSS, вы, очевидно, видели код, написанный другими разработчиками. Нетрудно заметить, что селекторы атрибутов используются достаточно редко. Многие вообще не используют такие селекторы, аргументируя это тем, что они могут достичь такого же результата, просто добавив класс или ID, но в конечном итоге это может привести к CSS файлу с невероятным количеством селекторов по классу или ID, в которых разобраться будет крайне сложно.

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

<ul>
  <li><a href="#" rel="asean">Myanmar</a></li>
  <li><a href="#" rel="ecowas">Mali</a></li>
  <li><a href="#" rel="asean">Cambodia</a></li>
  <li><a href="#">Kurdistan</a></li>
</ul>

Таким образом мы стилизуем элементы на основании значений rel атрибутов:

li a[rel="asean"] {
  font-weight: bold;
}

li a[rel="ecowas"] {
  font-style: italics;
}

Проблема заключается в том, что если у атрибута rel будет более, чем одно значение, предложенный выше способ стилизации не сработает. Но мы можем исправить это, использовав ‘~=’ вместо ‘=’.