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