Name: Sobes.tech
Rating: 4.9 (250 reviews)

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

Существует несколько видов селекторов атрибутов:

[attribute] - Выбирает элементы, имеющие указанный атрибут.
[attribute="value"] - Выбирает элементы, имеющие указанный атрибут со строго заданным значением.
[attribute~="value"] - Выбирает элементы, имеющие указанный атрибут, значение которого содержит список слов, разделенных пробелами, и одно из этих слов точно совпадает с "value".
[attribute^="value"] - Выбирает элементы, имеющие указанный атрибут, значение которого начинается с "value".
[attribute$="value"] - Выбирает элементы, имеющие указанный атрибут, значение которого заканчивается на "value".
[attribute*="value"] - Выбирает элементы, имеющие указанный атрибут, значение которого содержит подстроку "value".
[attribute|="value"] - Выбирает элементы, имеющие указанный атрибут, значение которого является "value" или начинается с "value-" (дефис), используется для выбора языков, например, lang="en" или lang="en-US".

Примеры использования:

/* Все элементы с атрибутом "data-type" */
[data-type] {
  border: 1px solid black;
}

/* Все ссылки с атрибутом "target" и значением "_blank" */
a[target="_blank"] {
  color: blue;
}

/* Все элементы с классом "item", где значение class содержит слово "active" */
[class~="active"] {
  font-weight: bold;
}

/* Все элементы с атрибутом "src", значение которого начинается с "/images/" */
[src^="/images/"] {
  opacity: 0.8;
}

/* Все ссылки с атрибутом "href", значение которого заканчивается на ".pdf" */
a[href$=".pdf"] {
  text-decoration: none;
}

/* Все элементы с атрибутом "alt", значение которого содержит слово "photo" */
[alt*="photo"] {
  box-shadow: 2px 2px 5px grey;
}

/* Элементы с атрибутом "lang" равным "en" или начинающимся с "en-" */
[lang|="en"] {
  font-style: italic;
}

Что такое селектор атрибутов в CSS?