Селекторы по атрибутам

Предисловие

«Селекторы по атрибутам» это довольно интересная тема, которая открывает кучу возможностей во время верстки макета. Некоторые из таких селекторов я использую на практике. Это далеко не все интересные селекторы в css, и про некоторые из них я написал статьи ранее.

видео

Воспроизвести видео

Селектор по наличию атрибута [attr]

Это самый простой селектор. Для примера я возьму блок с дата-атрибутом надуманного плагина анимации появления элементов. Добавлю два элемента div в html разметку добавлю им стили для видимости:

<div class="block">первый</div>
<div class="block">второй</div>

.block {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
}

Первому блоку добавлю атрибут data-animation-type

<div class="block" data-animation-type>первый</div>
<div class="block">второй</div>

Этому блоку будет добавлена анимация. Для того, что-бы получить именно этот блок, нужно прописать следующий селектор:

[data-animation-type] {}

Для видимости того, что работает этот селектор, я поменяю цвет текста на белый:

[data-animation-type] {
  color: white;
}

Но для анимации, конечно, будут другие стили, например время анимации

Селектор по наличию атрибута с точным значением [attr=value]

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

Для каждого элемента нужно добавить определённую анимацию. Можно добавить новый класс, а можно нашему атрибуту задать значение и по нему задать необходимое название анимации.

<div class="block" data-animation-type="left-toright">Первый</div>
<div class="block" data-animation-type="top-to-bottom">Второй</div>
<div class="block" data-animation-type>Третий</div>

Что-бы визуально было видно работу этого селектора, я второму блоку сделаю фоновый цвет немного темнее.

[data-animation-type="top-to-bottom"] {
  background-color: brown;
}

Селектор с одним из значений атрибута [attr~=value]

Следующий пример хорошим назвать трудно, но не получилось придумать что-то хорошее, так как в основном у классов может быть несколько значений, а у других атрибутов по одному. Но скажем так: атрибут data-animation-type можно немного сократить и положить в него несколько значений, первые значения оставлю как есть, но добавлю в него второе. Пусть по второму значению будет добавляться задержка анимации.

<div class="block" data-animation-type="left-toright 2">Первый</div>
<div class="block" data-animation-type="top-to-bottom 1">Второй</div>
<div class="block" data-animation-type="3">Третий</div>

Добавив второе значение, один из селекторов у нас перестал работать, а именно по точному значению атрибута:

Но это можно поправить изменив селектор следующим образом:

[data-animation-type~="top-to-bottom"] {
  background-color: brown;
}

И наш второй блок вновь потемнел:

Второй блок вновь потемнел

[attr|=value] Обозначает элемент с именем атрибута attr.

Его значение при этом может быть или в точности равно value или может начинаться с value со сразу же следующим «-» (U+002D). Это может быть использовано когда язык описывается с подходом.

Где можно применить такой селектор? Например есть у нас лендинг с кучей разделов.

<section class="section block">Первый</section>
<section class="section-two block">Второй</section>
<section class="section_three block">Третий</section>
<section class="block section-four">Четвёртый</section>

У каждого раздела есть свой фоновый цвет, но есть и одинаковые правила.

section {
  width: 100px;
  height: 100px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
}

.section {
  background-color: white;
}

.section-two {
  background-color: bisque;
}

.section_three {
  background-color: aquamarine;
}

.four-section {
  background-color: cadetblue;
}

Можно не плодить классы для каждого раздела или не писать одинаковые свойства для каждого раздела, так же не нужен и глобальный селектор, а просто выбрать все классы, которые начинаются, к примеру, на section- или равны section и добавить нужные правила:

<section class="section">Первый</section>
<section class="section-two">Второй</section>
<section class="section_three">Третий</section>
<section class="four-section">Четвёртый</section>

.section {
  background-color: white;
}

.section-two {
  background-color: bisque;
}

.section_three {
  background-color: aquamarine;
}

.four-section {
  background-color: cadetblue;
}

[class|="section"] {
  width: 100px;
  height: 100px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
}

Но тут не стоит забывать, какие именно классы будут работать:

• section_three не будет работать, так как после section вместо дефиса(-) нижнее подчеркивание(_)
• four-section так же не будет работать: так как начинается класс совсем по-другому

А остальные селекторы работают отлично!

[attr^=value] Обозначает элемент с именем атрибута attr значение которого начинается с value

Возьму два класса, которые будут стилизовать кнопку. У них будет много общих стилей, но что-то будет различаться:

.button-button {
  background-color: aliceblue;
}

.button-submit {
  background-color:burlywood;
}

<button class="button-button">button</button>
<button class="button-submit">submit</button>

Для того, что бы прописать одинаковые стили нам потребуется вот такой селектор с правилами:

[class^="button"] {
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  margin: 5px;
}

[attr$=value] Обозначает элемент с именем атрибута attr чьё значение заканчивается на value.

Такой селектор использую на лендингах. Вот к примеру есть несколько заголовков в разных разделах. У всех есть много общих стилей, но и есть те, которые различаются. Ну, к примеру цвет текста.

<h2 class="block-1-heading">1-heading</h2>
<h2 class="block-2-heading">2-heading</h2>
<h2 class="block-3-heading">3-heading</h2>

.block-1-heading {
  color: tomato;
}

.block-2-heading {
  color: brown;
}

.block-3-heading {
  color: chocolate;
}

Теперь, воспользовавшись, этим селектором можно прописать одинаковые стили для всех заголовков:

[class$="heading"] {
  margin: 0 0 1em;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
}

[attr*=value] Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки value как подстроки.

Ну к этому тоже можно было что-то лучшее найти из практики, но приходится опять придумывать... Возьму три таких заголовка:

<h2 class="block-green-heading">green-heading</h2>
<h2 class="block-red-heading">red-heading</h2>
<h2 class="block-blue-heading">blue-heading</h2>

Возьму уже готовые стили:

[class$="heading"] {
  margin: 0 0 1em;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
}

Теперь можно поменять цвета заголовкам:

[class*="green"] {
  color: green;
}

[class*="red"] {
  color: red;
}

[class*="blue"] {
  color: blue;
}

Специфичнось

По специфичности все селекторы по атрибутам равнозначны, то есть работать будет тот селектор, который ниже в вашем файле стилей)), а относительно других селекторов имеют такую же силу как и селекторы по классу.

Итог

Вообще css это огромное количество разновидностей селекторов, но и селекторы по атрибутам уже могут облегчить и разнообразить работу над проектом, сократить количество кода, да и просто сделать работу интереснее.