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

[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"].

Структурные псевдоклассы CSS3

В CSS3 предоставляется более эффективный механизм выбора элементов на основе их местоположения в структуре DOM.

Рассмотрим обработку весьма распространенной конструкции, при которой ведется работа над панелью навигации для более широкого окна просмотра и нам требуется, чтобы в левой стороне экрана были все ссылки, кроме последней.

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

Home

About

Films

Forum

Contact Us

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

Селектор :last-child

В CSS 2.1 уже был селектор, применяющийся для выбора первого элемента списка:

div:first-child {

/* Стили */

}