Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

}

Оно будет нацелено только на те изображения, которые имеют атрибут alt со значением sausages, например:

До сих пор мы довольствовались тем, что предоставлялось спецификацией CSS2. Интересно, а что же нового появилось с выходом спецификации CSS3?

Селекторы CSS3, соответствующие подстрокам значений атрибутов

CSS3 позволяет выбирать элементы на основе подстрок значений их атрибутов. Хотя данная формулировка воспринимается с трудом, но ничего сложного здесь нет! Вариантов соответствия подстроке значения атрибута всего три:

• подстрока находится в начале значения;

• значение содержит экземпляр подстроки;

• значение заканчивается подстрокой.

Посмотрим, как они выглядят.

Селектор значения атрибута по подстроке, находящейся в его начале

Рассмотрим следующую разметку:

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

img[alt^="film"] {

/* Стили */

}

Ключевым здесь выступает символ ^ (который называется «карет», также его часто называют колпаком), означающий «начинается с». Поскольку оба атрибута alt начинаются с film, селектор выбирает оба тега img.

Селектор значения атрибута по имеющемуся в нем экземпляру подстроки

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

[атрибут*="значение"] {

/* Стили */

}

Если нужно, этот селектор, как и все селекторы атрибутов, может использоваться в сочетании с селектором типа (который ссылается на фактически используемый элемент HTML), хотя лично я поступлю таким образом только в случае крайней необходимости (в том случае, если понадобится сменить тип использу­емого элемента).

Обратимся к примеру и рассмотрим следующую разметку:

Will I get selected?

Этот элемент можно выбрать следующим образом:

[data-ingredients*="cream"] {

color: red;

}

Ключевым здесь выступает символ *, который в данном контексте означает «содержит».

Селектор «начинается с» с этой разметкой работать не будет, поскольку строка, являющаяся значением атрибута, не начинается с "cream". Но в ней содержится "cream", следовательно, селектор значения атрибута, работающий по принципу «содержит экземпляр», данный элемент обязательно найдет.

Селектор значения атрибута по подстроке, находящейся в его конце

Селектор значения атрибута по подстроке, находящейся в его конце, имеет следующий синтаксис:

[атрибут$="значение"] {

/* Стили */

}

Разобраться в нем поможет следующий пример. Рассмотрим его разметку:

Will I get selected?

Will I get selected?

Will I get selected?

Предположим, нам нужно выбрать тот элемент, в значении атрибута data-ingredients которого имеются слова scones, cream и jam (то есть первый элемент). Мы не можем воспользоваться селектором подстроки значения атрибута, работающим по принципу «содержит экземпляр» (он выберет все три варианта) или «начинается с» (он выберет только последний элемент). Но мы можем воспользоваться селектором подстроки значения атрибута, работающим по принципу «заканчивается подстрокой»:

[data-ingredients$="jam"] {

color: red;

}

Ключевым символом здесь является знак доллара ($), означающий «заканчивается подстрокой».

Особенность выбора по атрибутам

Важно уяснить, что у выбора по атрибутам есть одна особенность: значения атрибутов рассматриваются как цельные строковые значения. Рассмотрим следующее правило CSS:

[data-film^="film"] {

color: red;

}

Как ни странно, этот селектор в отношении следующего значения атрибута не сработает, даже притом что одно из слов внутри атрибута начинается с сочетания film:

Moulin Rouge is dreadful

Причина в том, что в данном случае атрибут data-film начинается не с film, а с awful (и если вы видели фильм «Мулен Руж», то знаете, что у него также жуткое начало, так и не переходящее затем в более позитивное русло).

Кроме применения недавно рассмотренных селекторов на совпадение с подстрокой есть еще несколько способов обхода этой проблемы. Можно воспользоваться селектором списка значений, разделенных пробелами (обратите внимание на символ тильды), пользующимся поддержкой даже старых браузеров вплоть до Internet Explorer 7:

[data-film~="film"] {

color: red;

}

Можно выбрать весь атрибут:

[data-film="awful moulin-rouge film"] {

color: red;

}

Или же, если нужно сделать выбор только при наличии в значении атрибута двух строк, можно объединить эту пару (или столько строк, сколько нужно) в селекторах подстрок атрибутов, работающих по принципу «содержит экземпляр»:

[data-film*="awful"][data-film*="moulin-rouge"] {

color: red;

}

Правильного варианта действий на все случаи жизни не существует, все зависит от сложности структуры той строки, на основании которой вы пытаетесь осуществить свой выбор.

Селекторы атрибутов позволяют выбрать элементы, чьи идентификаторы и классы начинаются с цифр

До появления HTML5 разметка, в которой идентификаторы и имена классов начинаются с цифр, считалась недопустимой. В HTML5 эти ограничения устранены. Что касается идентификаторов (ID), нужно по-прежнему учитывать некоторые обстоятельства. В идентификаторе не должно быть пробелов, и для страницы он должен быть уникальным. Дополнительные сведения можно найти по адресу http://www.w3.org/html/wg/drafts/html/master/dom.html.

Теперь, несмотря на то что значения идентификаторов и классов в HTML5 могут начинаться с цифр, спецификация CSS по-прежнему не позволяет использовать селекторы идентификаторов и классов, начинающиеся с цифр (http://www.w3.org/TR/CSS21/syndata.html).

К счастью, этот запрет легко обойти, воспользовавшись селектором атрибутов, например [id="10"].