Селекторы атрибутов в CSS: продвинутая стилизация

Перевод статьи «Advanced Styling using CSS Attribute Selectors».

CSS — тот самый друг, которого мы, разработчики, и любим, и ненавидим. Одно из его неоспоримых достоинств — возможность выбирать элементы по их атрибутам.

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

Селектор [атрибут]

Селектор [атрибут] позволяет выбрать элементы с определенным атрибутом. Пример:

img[alt] {
  border: 2px solid yellow;
}

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

<img src="./../../images/dog.png" alt="cute white dog"/> // Выбран, имеет желтую рамку
<img src="./../../images/cat.png"/>// Не выбран, нет рамки

Селектор [атрибут="значение"]

Селектор [атрибут="значение"] выбирает элементы, содержащие указанный атрибут с конкретным значением.

Строки значений атрибутов по умолчанию регистрозависимы, но это можно изменить, если добавить «i» перед закрывающей квадратной скобкой, как показано ниже:

img[alt="paper"] { //Регистр учитывается
  border: 2px solid yellow;
}

img[alt="PapEr" i] {  //Регистр не учитывается
  border: 2px solid yellow;
}

Указанные селекторы захватят одинаковые элементы.

Пример:

<img src="./../../images/paper.png" alt="paper"/> // Выбран, есть желтая рамка

Указанные селекторы выбирают только изображения, имеющие атрибут alt со значением «paper».

Селектор [атрибут*="значение"]

Этот селектор используется для выборки элементов, указанные атрибуты которых имеют значения, содержащие указанную подстроку (в любом месте).

img[alt*="ter"] {
  border: 2px solid yellow;
}

Пример:

<img src="./../../images/paper.png" alt="alter"/> // Выбран, есть желтая рамка
<img src="./../../images/paper.png" alt="termite"/> // Выбран, есть желтая рамка
<img src="./../../images/paper.png" alt="flattering"/> // Выбран, есть желтая рамка

Селектор [атрибут~="значение"]

Селектор [атрибут~="значение"] выбирает элементы с указанными атрибутами, значения которых содержат определенное (отдельное) слово.

img[alt~="coin"] {
  border: 2px solid yellow;
}

Пример:

<img src="./../../images/man.png" alt="coin collector"/> // Выбран, есть желтая рамка
<img src="./../../images/office.png" alt=" Buycoins Headquaters"/> // Не выбран

Селектор [атрибут^="значение"]

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

img[alt^="hat"] {
  border: 2px solid yellow;
}

Пример:

<img src="./../../images/hat.png" alt="hat"/> // Выбран, есть желтая рамка
<img src="./../../images/ronaldo.png" alt="hatrick"/> // Выбран, есть желтая рамка

Селектор [атрибут|="значение"]

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

img[alt|="front"] {
  border: 2px solid yellow;
}

Пример:

<img src="./../../images/linda.png" alt="front-end-developer"/> // Выбран, есть желтая рамка
<img src="./../../images/linda.png" alt="frontend-developer"/> // Не выбран, нет рамки
<img src="./../../images/location.png" alt="front"/> // Выбран, есть желтая рамка

Селектор [атрибут$="значение"]

Селектор [атрибут$="значение"] используется для выборки элементов, значения атрибутов которых заканчиваются указанной подстрокой. Эта подстрока не обязательно будет отдельным словом.

img[alt$="tion"] {
  border: 2px solid yellow;
}

Пример:

<img src="./../../images/banner.png" alt="education"/> // Выбран, есть желтая рамка
<img src="./../../images/linda.png" alt="hand-lotion"/> // Выбран, есть желтая рамка

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]