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

}

Оно будет нацелено на каждый использованный в разметке тег изображения, у которого имеется атрибут alt. Или же предположим, что нам нужно выбрать все элементы с атрибутом data-sausage:

[data-sausage] {

/* Стили */

}

Для указания атрибута понадобятся всего лишь квадратные скобки.

совет

Атрибут типа data-* был введен в HTML5 для предоставления места пользовательским данным, которые не могут быть должным образом сохранены с помощью других механизмов. Описание спецификации можно найти по адресу http://www.w3.org/TR/2010/WD-html5-201 01019/elements.html.

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

img[alt="sausages"] {

/* Стили */

}

Оно будет нацелено только на те изображения, которые имеют атрибут 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 (то есть первый элемент). Мы не можем воспользоваться селектором подстроки значения атрибута, работающим по принципу «содержит экземпляр» (он выберет все три варианта) или «начинается с» (он выберет только последний элемент). Но мы можем воспользоваться селектором подстроки значения атрибута, работающим по принципу «заканчивается подстрокой»: