junior
Какие существуют селекторы атрибутов?
Селекторы атрибутов позволяют выбирать элементы на основании наличия HTML-атрибута или его значения.
| Селектор | Описание | Пример |
|---|---|---|
[attr] |
Элементы, имеющие атрибут attr |
[disabled] |
[attr=value] |
Значение атрибута точно равно value |
[type="text"] |
[attr^=value] |
Значение начинается с value |
[href^="https"] |
[attr$=value] |
Значение заканчивается на value |
[href$=".pdf"] |
[attr*=value] |
Значение содержит подстроку value |
[href*="youtube"] |
[attr~=value] |
Значение содержит value как отдельное слово (через пробел) |
[class~="active"] |
[attr|=value] |
Значение равно value или начинается с value- |
[lang|="en"] |
Пример использования
Пример
/* Все ссылки на PDF-файлы — с иконкой */
a[href$=".pdf"]::after {
content: " (PDF)";
color: red;
}
/* Все внешние ссылки */
a[href^="http"] {
color: green;
}
/* Все обязательные поля формы */
input[required] {
border: 2px solid orange;
}
На собеседовании: достаточно помнить основные варианты: точное совпадение
=, начало^=, конец$=, подстрока*=. Частая ошибка — путать~=(слово целиком) и*=(подстрока).