Выбор по значению атрибута

Селекторы по значенению атрибута сужают выбор элементов по сравнению с селекторами поналичию атрибута. Например, если требуется выделить гиперссылку, ссылающуюся на определенный документ веб-сервера, пишется правило с точным значением атрибута:

a[href=”http://www.css-discuss.org/about.html”] {font-­style: italic}

Для любого элемента может быть задано любое сочетание атрибутов и их значений. Например, следующее правило удваивает размер текста гиперссылки, имеющей точные значения двух атрибутов:

a[href=”http://www.w3.org/”][title=”W3C Home”] {font-size: 200%}

Если это правило применяется к следующим строкам HTML-страницы:

<a href=”http://www.w3.org/” title=”W3C Home”>W3C</a><br>

<a href=”http://www.webstandards.org”

title=”Web Standards Organization”>Standards Info</a><br>

<a href=”http://www.example.org/” title=”W3C Home”>dead link</a>

то размер текста будет увеличен только для первой гиперссылки, но не второй или третьей:

W3C

Standards Info

dead link

Выбор по значению элемента списка

Приведенные примеры относились к выбору элементов при точном совпадении значений атрибутов. Но некоторые атрибуты могут иметь в качестве значений списки, состоящие из элементов, разделенных пробелами или тире. Например, в следующем примере таковым является атрибут class:

<p class=”urgent warning”>При работе с плутонием нельзя допускать

достижения им критической массы!</p>

Этот абзац может быть выбран для стилизации одним из селекторов выбора по значению элемента списка:

p[class~=”urgent”] {color: red;}

или

p[class~=”warning”] {color: yellow;}

Селектор по значению элемента списка может использоваться для выбора элементов по атрибутам, значения которых содержат любые тексты с пробелами. Пусть веб-страница содержит много рисунков, но только в некоторых из них в тексте атрибута title встречается слово «Рисунок", например: «Рисунок 4. Вождь племени», «Рисунок художника …», «Рисунок для художника – то же, что…». Следующее правило выберет все такие рисунки:

img[title|=”Рисунок”] {border: 1px blue;}

Выбор по значению до тире

Селектор атрибутов с вертикальной чертой перед равенством выбирает любой элемент, значение указанного атрибута которого равно заданному значению value или начинается с этого значению до тире (-). В качестве примера рассмотрим правило:

*[lang|=”en”] {color: white;}

Этот селектор будет выбирать любой элемент, значение атрибута lang которого равно en или начинается с en-. Поэтому первые три элемента в следующей HTML-разметке будут выбраны для стилизации, а последние два – нет:

<h1 lang=”en”>Hellow!</h1>

<p lang=”en-us”>Greetings!</p>

<div lang=”en-au”>G’day!</div>

<p lang=”fr”>Bonjour!</p>

<h4 lang=”cy-en”>Jrooana!</h4>

Селектор [атрибут|=значение] может применяться для любых атрибутов. Например, в HTML-странице есть набор рисунков, каждый из которых хранится в файле с именем, например, figure-1.gif, figure-2.gif и т. д. Все изображения с такими рисунками могут быть выбраны с помощью селектора:

img[src|=”figure”] {border: 1px solid gray;}