CSS селектор [атрибут=значение]
Поддержка браузерами
12.0+ | 7.0+ | 2.0+ | 4.0+ | 9.6+ | 3.1+ |
Описание
Селектор [атрибут=значение] применяет заданный стиль к элементу с указанным атрибутом и значением. Например, если мы хотим выделить жирным шрифтом ссылку, указывающую на определенный документ веб-сервера, то это можно записать так:
a[href="httр://www.puzzleweb.ru/css/selectors.php"] { font-weight: bold; }
Для выбора нужных элементов может быть определено любое сочетание атрибутов и значений. Однако если указанная комбинация не встретиться в документе, то селектор не выбирет ничего.
Примечание: выбор элементов осуществляется по строгому соблюдению порядка слов и пробелов между ними. То есть для выбора конкретного элемента по значению его атрибута нужно внимательно следить за написанием значения. По сути, это можно назвать строгим сравнением строк.
Пример:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style> a[target=_blank] { background-color: yellow; } </style> </head> <body> <p>Ссылка с target="_blank" будет выделена желтым цветом.</p> <p> <a href="httр://www.puzzleweb.ru" target="_blank">www.puzzleweb.ru</a><br> <a href="httр://puzzleweb.ru">puzzleweb.ru</a> </p> </body> </html>
Результат данного примера:
Ссылка с target="_blank" будет выделена желтым цветом.