Поиск элементов по атрибутам и их значениям – очень мощная функция CSS.
Чтобы узнать, существует ли тот или иной атрибут, используйте такой синтаксис:
a[title] {
background-color: yellow;
}
Узнать, существует ли атрибут с тем или иным значением, можно с помощью синтаксиса:
a[target="_blank"] {
background-color: hotpink;
}
Но это не все. С помощью селекторов атрибута можно выполнить много других задач:
- [attribute~=“foo”]: проверяет, содержит ли значение слово foo.
- [attribute|=“foo”]: проверяет, начинается ли значение со слова foo.
- [attribute^=“foo”]: проверяет, начинается ли значение с букв foo.
- [attribute$=“foo”]: проверяет, заканчивается ли значение на foo.
- [attribute*=“foo”]: проверяет, содержит ли значение буквы foo.