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

Development | Amber | Комментировать запись

Поиск элементов по атрибутам и их значениям – очень мощная функция 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.