Порой бывает необходимо, обратиться к какому-либо элементу страницы, у которого не прописан 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] – все элементы, у которых атрибут содержит значение (может быть набор символов, а не целое слово)