CSS Обратиться к любому элементу по атрибутам

Порой бывает необходимо, обратиться к какому-либо элементу страницы, у которого не прописан class или ID, не имея возможности добавить class или ID в html. CSS Обратиться к любому элементу по атрибутам – вот выход из ситуации.

Часто такие ситуации складываются, когда html код генерируется внешним подключаем script, и не может быть изменен вами. Но при этом его необходимо стилизовать, или изменить вид на CSS.

Итак, есть такая штука, как селекторы по атрибутам html. С этой помощью можно на CSS обратиться к любому элементу по атрибутам. Атрибуты – это те самые атрибуты тэгов html, которые src, href, data-*, title, name, rel, alt и др.

В CSS можно прописывать селектор, в котором будет полное или не частичное соответствие значения определённого атрибута.

Рассмотрим примеры: CSS Обратиться к любому элементу по атрибутам

Например, если у нас есть пиксельная иконка, которую генерирует код PayPal, и на мобильной версии её нужно скрыть (потому, что сильно мешает). Тогда достаточно просто можно это сделать, на чистом CSS:

<img src="https://paypal.com/o/img/px" />

<style>
img[src="https://paypal.com/o/img/px"]{
display: none;
}
</style>

Или, например, нужно скрыть все элементы с title, который начинается на «Отправлено «. Так и сделаем:

<div title="Отправлено сегодня">...</div>
<div title="Доставлено сегодня">...</div>
<div title="Отправлено вчера">...</div>

<style>
div[title|="Отправлено"]{
display: none;
}
</style>

Всего есть несколько таких селекторов:

[attribute] – все элементы, у которых есть такой атрибут
[attribute=value] – все элементы, у которых атрибут точно = значению
[attribute~=value] – все элементы, у которых атрибут содержит значение (должно быть целое слово)
[attribute|=value] – все элементы, у которых атрибут начинается значением (должно быть целое слово)
[attribute^=value] – все элементы, у которых атрибут начинается значением (может быть не целое слово
[attribute$=value] – все элементы, у которых атрибут заканчивается значением (может быть не целое слово)
[attribute*=value] – все элементы, у которых атрибут содержит значение (может быть набор символов, а не целое слово)

186