MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

Обзор

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

[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' в этой спецификации.
Рекомендация Начальное определение

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Функциональность 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,