Селекторы атрибутов

Обзор

Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.

[attr]
Обозначает элемент с атрибутом по имени attr.
[attr=value]
Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value.
[attr~=value]
Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value
[attr|=value]
Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подкодом.
[attr^=value]
Обозначает элемент с именем атрибута attr значение которого начинается с "value"
[attr$=value]
Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"
[attr*=value]
Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.

Пример

/* Все span с атрибутом "lang" будут жирными */
span[lang] {font-weight:bold;}
 
/* Все span в Португалии будут зелеными */
span[lang="pt"] {color:green;}

/* Все span с американским английским будут синими */
span[lang~="en-us"] {color: blue;}

/* Любые span на китайском языке будут красными, как на упрощенном китайском (zh-CN) так и на традиционном (zh-TW) */
span[lang|="zh"] {color: red;}

/* Все внутренние ссылки будут иметь золотой фон */
a[href^="#"] {background-color:gold}

/* Все ссылки с url заканчивающимся на .cn будут красными */
a[href$=".cn"] {color: red;}

/* Все ссылки содержащие "example" в url будут иметь серый фон */
a[href*="example"] {background-color: #CCCCCC;}
<div class="hello-example">
    <a href="http://example.com">English:</a>
    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
    <a href="#portuguese">Portuguese:</a>
    <span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
    <a href="http://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好!</span>
</div>
<div class="hello-example">
    <a href="http://example.cn">Chinese (Traditional):</a>
    <span lang="zh-TW">世界您好!</span>
</div>

Спецификации

Спецификация Статус Комментарий
Selectors Level 3
Определение 'attribute selectors' в этой спецификации.
Рекомендация  
CSS Level 2 (Revision 1)
Определение 'attribute selectors' в этой спецификации.
Рекомендация Начальное определение

Совместимость с браузерами

Функциональность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (Да) 1.0 (1.7 или ранее) 7 9 3
Функциональность Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ? ? 1.0 (1) ? ? ?

См. также

Метки документа и участники

 Внесли вклад в эту страницу: surrsoft
 Обновлялась последний раз: surrsoft,