Выбор на основании конкретного значения атрибута

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

a[href="http://www.css-discuss.org/about.html"] {font-weight: bold;}

Для любого элемента может быть определено любое сочетание атрибута и значения. Однако если эта конкретная комбинация не встречается в документе, селектор не выберет ничего. И опять же языки XML могут выиграть от применения этого подхода для оформления. Вернемся к нашему примеру PlanetML. Предположим, требуется выбрать только те элементы planet, значение атрибута moons которых равно 1:

planet[moons="1"] {font-weight: bold;}

При этом полужирным шрифтом будет выделен текст второго элемента следующего фрагмента разметки, но не первого или третьего:

Venus
Earth
Mars

Как и в случае с выбором атрибутов, можно объединить несколько селекторов, чтобы выбрать один документ.


Например, чтобы удвоить размер текста любой гиперссылки HTML, у которой атрибут href имеет значение http://www.1111.org/ и атрибут title имеет значение W3C Home, напишите:

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

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

(a href="http://www.1111.org/" title="W3C Home">W3C(/a)

(a href="http://www.2222.org"
title="Web Standards Organization">Standards Info(/a)

(a href="http://www.2222.org/" title="W3C Home">dead.link(/a)

Обратите внимание, что этот формат требует точного совпадения значения атрибута. А это требование становится источником затруднений, когда неожиданно встречаются значения, которые могут, в свою очередь, содержать разделенный пробелами список значений (как атрибут class в HTML). Например, рассмотрим следующий фрагмент разметки:

Мercury

Единственный способ выбрать этот элемент по точному значению его атрибута – записать:

planet[type="barren rocky"] {font-weight: bold;}

Если бы мы написали planet[type="barren"], правило не нашло бы соответствия с примером разметки и поэтому дало бы сбой.


Это справедливо и для атрибута class в HTML. Рассмотрим следующее:

При работе с плутонием необходимо предпринять меры по недопущению достижения критической массы.



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

p[class="urgent warning"] {font-weight: bold;}

Это не эквивалент точечной нотации классов, как будет рассмотрено в следующем разделе. Данное выражение выбирает любой элемент p, значение атрибута class которого именно urgent warning – со строгим соблюдением порядка слов и одним пробелом между ними. По сути, это строгое сравнение строк. Также помните, что селекторы идентификаторов и селекторы атрибутов, нацеленные на атрибут id, – это не совсем одно и то же. Иначе говоря, существует едва различимое, но важное отличие между h1#page-title и h1[id="page-title"]. Это отличие обсуждается в следующей главе.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор первого дочернего элемента
Выбор по частичному значению атрибута

Вернуться в раздел: CSS / 2. Селекторы