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

Селектор атрибута задается в одной из следующих форм:

· [ имя-атрибута ] – селектор действует, если в элементе есть атрибут с именем имя-атрибута;

· [ имя-атрибута = значение-атрибута ] – селектор действует, если в элементе есть атрибут с именем имя-атрибута и значением, равным значение-атрибута;

· [ имя-атрибута ~= значение ] – селектор действует, если в элементе есть атрибут с именем имя-атрибута и со списком значений, разделенных пробелами, причем один из элементов списка равен параметру значение;

· [ имя-атрибута |= значение ] – селектор действует, если в элементе есть атрибут с именем имя-атрибута и со списком значений, разделенных пробелами, причем каждый из элементов списка либо равна значению, либо начинается со строки начинается со строки значение, за которой следует символ дефиса "-";

· [ имя-атрибута ^= значение ] – селектор действует, если в элементе есть атрибут с именем имя-атрибута, значение которого начинается со строки значение;

· [ имя-атрибута $= значение ] – селектор действует, если в элементе есть атрибут с именем имя-атрибута, значение которого заканчивается строкой значение.

· [ имя-атрибута *= значение ] – селектор действует, если в элементе есть атрибут с именем имя-атрибута, значение которого содержит строку значение.

Как и для селектора id, перед селектором атрибута может быть задан либо селектор типа, либо универсальный селектор, либо имя элемента не указывается.

Пример 4.3.23. Задание селектора атрибута:

1. span[title]{color:magenta}– элементы span с атрибутом title, например, содержимое контейнера

<h3>Протокол <span title="Internet Protocol">IP</span></h3>

будет выведено фиолетовым цветом:

2. [lang="en"]{color:green} – все элементы, у которых значение атрибута lang равно "en", например, содержимое контейнера <span>…</span> в элементе

<h2>Протоколы <span lang="en">Internet</span></h2>

будет выведено зеленым цветом:

3. Пусть заданы правила

.italic {font-style: italic}

.blue {color: blue}

.bold {font-weight: bold}

и правило

h2[class~="bold"]{text-decoration:underline} – все элементы h2, у которых в списке значений атрибута class содержится элемент со значением "bold", например, содержимое контейнера

<h2 class="bold italic blue">Раздел 2</h2>

будет выведено жирным шрифтом, курсивом, синим цветом и, кроме того, значение будет подчеркнуто:

4. Пусть заданы правила

.text-Style {font-style: italic}

.text {text-align:right}

и правило

[class|="text"]{background-color:yellow} – все элементы class, у которых в списке значений атрибута class значения либо равны "text", либо начинаются на строку "text-", например, содержимое контейнера

<h3 class="text-Style text">Раздел 2.1.4</h3>

будет выведено с желтым цветом фона:

5. Пусть задано правило

.fontStyle {font-style: italic}

и правило

[class^="font"]{color:green} – все элементы class, у которых значение атрибута class начинается на строку "font", например, содержимое контейнера

<h3 class="fontStyle">Раздел 2.3</h3>

будет выведено зеленым цветом:

6. Пусть задано правило

.alignRight {text-align: right}

и правило

[class$="Right"]{color: brown} – все элементы class, у которых значение атрибута class заканчивается строкой "Right", например, содержимое контейнера

<p class="alignRight">Абзац 18</p>

будет выведено коричневым цветом:

7. Пусть задано правило

.parcenteralign {text-align: center}

и правило

[class*="center"]{color:blue} – все элементы class, у которых значение атрибута class содержит строку "center", например, содержимое контейнера

<p class="parcenteralign">Абзац 32</p>

будет выведено синим цветом: