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

Стоит отметить, что все эти селекторы можно использовать как в CSS файлах, так и в JavaScript методах document.querySelector() и document.querySelectorAll(), принимающих любой валидный CSS селектор.

Основы селекторов атрибутов

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

/* Выбрать элементы с атрибутом data-sandwich */
[data-sandwich] {}

/* Выбрать элементы с атрибутом data-sandwich со значением равным tuna */
[data-sandwich="tuna"] {}

Продвинутые селекторы атрибутов

Что делать с элементами, имеющими несколько значений? Частичные совпадения? Значения в другом порядке? CSS вам поможет!

Рассмотрим следующий элемент.

<div data-lunch="tuna-sandwich chips soda Cookie">My Lunch Order</div>

Что, если нужно найти элемент с атрибутом [data-lunch], содержащий слово chips? Прямое указание на значение не сработает в приведённом выше примере, потому что chips — это всего лишь одно из нескольких значений атрибута [data-lunch].

/* Это не работает */
[data-lunch="chips"] {}

Вместо этого поставьте перед значением тильду (~=""), чтобы сопоставить его со значением, разделённым пробелами.

/* Это работает */
[data-lunch~="chips"] {}

Допустим, вы хотите найти tuna, но вам всё равно, будет ли это tuna-sandwich или tuna-salad. Для этого можно использовать вертикальную черту (|).

Будет соответствовать любому значению, которое является точным совпадением или совпадением, за которым следует тире (-).

/* Это соответствует */
[data-lunch|="tuna"] {}

Если вы хотите проверить, начинается ли значение со строки, можно использовать символ каретки (^). В нашем примере ^="tuna" будет соответствовать, а ^="chips" — нет.

/* Это соответствует */
[data-lunch^="tuna"] {}

/* Это не соответствует */
[data-lunch^="chips"] {}

Чтобы проверить, заканчивается ли значение строкой, используйте знак доллара ($). В нашем примере $="Cookie" совпадает, потому что Cookie — это завершающее значение атрибута [data-lunch].

/* Это соответствует */
[data-lunch$="Cookie"] {}

Чтобы проверить наличие подстроки в любом месте значения, не заботясь о том, является ли она отдельным словом или нет, можно использовать звёздочку (*).

В нашем примере *="Cook" будет соответствовать, потому что Cookie содержит строку Cook.

/* Это соответствует */
[data-lunch*="Cook"] {}

Наконец, вы можете игнорировать регистр, используя i после значения. Если нужно найти любой экземпляр cookie, независимо от того, написан он с заглавной буквы или нет, сделаем следующее.

/* Это соответствует */
[data-lunch~="cookie" i] {}