Page 156 - Сила CSS3 Освой новейший стандарт

156 • Глава 4. Стилизация изображений и ссылок в зависимости от их типа

Селектор img[alt] — это пример простейшего типа селекторов атрибутов, про-
веряющего только наличие атрибута, но не его значение. В спецификации CSS 2.1
предусмотрено четыре типа селекторов атрибутов (см. таблицу 4.1).

Таблица 4.1. Селекторы атрибутов в CSS 2.1

Селектор атрибута Его назначение
[attr] Выбирает элементы с атрибутом attr, независимо от его
значения
[attr=val] Выбирает элементы с атрибутом attr, значение которого
в точности равно val

[attr~=val] Выбирает элементы с атрибутом attr, значение которого
представляет собой разделенный пробелами список слов, и одно
из слов в точности равно val
[attr|=val] Выбирает элементы с атрибутом attr, значение которого либо
в точности равно val, либо начинается с val, за которым сразу
же следует дефис

Таблица 4.2. Селекторы атрибутов в CSS3

Селектор атрибута Его назначение
[attr^=val] Выбирает элементы с атрибутом attr, значение которого
начинается с val
[attr$=val] Выбирает элементы с атрибутом attr, значение которого
заканчивается val

[attr*=val] Выбирает элементы с атрибутом attr, значение которого
содержит val

В терминологии W3C селекторы атрибутов из CSS 2.1 называются селекторами
наличия и значений атрибутов.
В версии CSS3 появилось три новых селектора
Если вы чувствуете, что начина- атрибутов (табл. 4.2), обеспечивающих более вы-
ете путаться в написании слож- сокую степень контроля над выбором элементов.
ных селекторов, рекомендую Принцип написания и работы селекторов атри-
зайти на страницу http://gallery.
theopalgroup.com/selectoracle, где бутов проще всего понять на живых примерах,
вы найдете очень простое объяс- поэтому давайте добавим селекторы на нашу
нение того или иного селектора на страницу, посмотрим на результаты и подумаем,
английском и испанском языках. какое еще практическое применение для них
можно придумать.

www.trk.kg