Любой атрибут, допускающий наличие разделенного пробелами списка слов, допускает и выбор на основании любого из этих слов. Классический пример в HTML – атрибут class, способный принимать в качестве значения несколько слов. Рассмотрим наш обычный пример текста:
<p class="urgent warning">При работе с плутонием необходимо предпринять меры
по недопущению достижения критической массы.</p>
Скажем, требуется выбрать элементы, атрибут class которых содержит слово warning. Это можно сделать посредством селектора атрибутов:
p[class~="warning"] {font-weight: bold;}
Обратите внимание на наличие в селекторе тильды (~). Это ключ для осуществления выбора на основании наличия в значении атрибута отделенного пробелами слова. Если пропустить тильду, то получится требование точного соответствия конкретному значению, рассмотренное в предыдущем разделе. Эта конструкция селектора эквивалентна рассмотренному ранее условному обозначению классов с помощью предшествующей точки. Таким образом, записи p.warning и p[class~="warning"] эквивалентны в случае применения к HTML-документам. Вот пример, который является HTML-версией представленной ранее разметки «PlanetML»:
<span class="barren rocky">Mercury</span >
<span class=" cloudy barren">Venus</span >
<span class="life-bearing cloudy">Earth</span >>
Чтобы выделить курсивом все элементы, содержащие слово barren в атрибуте class, напишите:
span[class~="barren"] {font-style: italic;}
Селектор этого правила выберет первые два элемента примера разметки и соответственно выделит их текст курсивом. Такой же результат был бы получен при записи span.barren {font-style: italic;}.
Так зачем же возиться с этой формой селектора атрибутов (тильда-равно) в HTML? Потому что она может использоваться для любого атрибута, не только class. Пусть, например, есть документ, содержащий ряд изображений, причем лишь некоторые из них являются рисунками. В этом случае для выбора только этих рисунков можно применить селектор атрибута по частичному значению, настроенный на текст атрибута title:
img[title~="Рисунок"] {border: 1px solid gray;}
Это правило будет соответствовать любому изображению, текст атрибута title которого содержит слово Рисунок. Следовательно, поскольку текст атрибута title всех рисунков выглядит примерно так. Лысый старейшина», правило будет соответствовать этим изображениям. Уж если на то пошло, селектор img[title~="Рисунок"] также будет выбирать атрибут title, имеющий значение «Рисунок для художника – то же, что движение для оратора…». Любое изображение, не имеющее атрибута title, или значение атрибута title которого не содержит слова «Рисунок», не будет выбрано. Более расширенный модуль CSS Selectors, который был выпущен значительно позже CSS2, содержит еще несколько селекторов атрибутов по частичному значению (или, как они названы в спецификации, «селекторов атрибутов по подстроке»). Поскольку они поддерживаются многими современными броузерами, включая IE7.
Таким образом, исходя из следующих правил и разметки получаем результаты.
span[class*="cloud"] {font-style: italic;}
span[class^="bar"] {background: silver;}
span[class$="y"] {font-weight: bold;}
<span class="barren rocky">Mercury</span>
<span class="cloudy barren">Venus</span>
<span class="life-bearing cloudy">Earth</span>
Первое из трех правил соответствует любому элементу span, атрибут class которого содержит подстроку cloud; таким образом выбираются обе планеты, в описании которых содержится слово «cloudy». По второму правилу выбирается любой элемент span, атрибут class которого начинается с подстроки bar. Сюда подходит только Меркурий (Mercury), атрибут class которого имеет значение barren rocky. Венера (Venus) не включена, потому что подстрока bar, входящая в слово barren, располагается не в начале значения атрибута class.
Наконец, третье правило соответствует любому элементу span, атрибут class которого заканчивается подстрокой y, поэтому выбираются Меркурий (Mercury) и Земля (Earth). Венера (Venus) опять осталась в стороне, поскольку значение ее атрибута class не заканчивается на y. Как и следовало ожидать, существует множество вариантов полезного применения таких селекторов. В качестве примера предположим, что требуется применить особый стиль ко всем ссылкам на веб-сайт O’Reilly Media. Вместо того чтобы описывать для них всех атрибут class и создавать стили для этого класса, можно просто записать следующее правило:
a[href*="oreilly.com"] {font-weight: bold;}
И конечно же, мы не ограничены лишь атрибутами class и href. Можно работать с любыми атрибутами: title, alt, src, id… все, что угодно. Стили могут применяться на основании значения атрибута или частей значения. Следующее правило описывает любой рисунок, используемый для формирования таблицы (плюс любое другое изображение, в URL которого есть строка «space» (пробел)):
mg[src*="space"] {border: 5px solid red;}
На момент написания данной книги селекторы по подстроке поддерживаются броузерами Safari, Gecko-броузерами, Opera и IE7/Win.