Псевдокласс :lang

Если требуется выбрать элемент на основании языка, то можно в селекторе использовать псевдокласс :lang, который почти аналогичен селектору атрибутов |=. Например, чтобы выделить курсивом любой элемент на французском языке, можно написать правило:

* :lang(fr) {font-style: italic;}

Основное отличие между селектором с псевдоклассом и селектором атрибутов заключается в том, что информация о языке может быть получена из нескольких источников: из атрибута lang элемента, из тега <meta> или из заголовка протокола HTTP. В последних двух случаях для выбора по языку можно использовать только псевдокласс :lang.

Селекторы атрибутов

Хотя в соответствии с современными тенденциями управление всеми свойствами представления HTML-элементов должно осуществляться средствами CSS, многие теги все еще имеют атрибуты, управляющие их поведением. Примером может служить тег <img>, который всегда имеет атрибут src, задающий источник загрузки файла изображения.

Селекторы атрибутов дают возможность выбирать элементы HTML-страницы для стилизации, основываясь на наличии в них атрибутов или значениях этих атрибутов. Так как селекторы классов и селекторы идентификаторов также базируются на атрибутах тегов class и id, их также можно рассматривать как частный случай селекторов атрибутов.

Список селекторов атрибутов приведен в табл. 5.

Таблица 5

Формат	Название	Условие стилизации элемента
a[attr]	Наличие атрибута	Элемент a имеет указанный атрибут attr.
a[attr=”value”]	Точное значение	Элемент a имеет указанный атрибут attr и его значение точно равно value.
a[attr~=”value”]	Значение элемента списка	Элемент a имеет указанный атрибут attr и один из элементов списка его значений точно равен value. Список значений атрибута разделен пробелами.
a[attr|=”value”]	Значение до тире	Элемент a имеет указанный атрибут attr и его полное значение или значение до тире точно равен value.
a[attr^=”value”]	Начинается с подстроки	Элемент a имеет указанный атрибут attr и его значение начинается с подстроки value.
a[attr$=”value”]	Заканчивается подстрокой	Элемент a имеет указанный атрибут attr и его значение заканчивается подстрокой value.
a[attr*=”value”]	Содержит подстроку	Элемент a имеет указанный атрибут attr и его значение содержит подстроку value.

Выбор по наличию атрибута

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

img[alt] {border: 3px solid red;}

Это правило может оказаться полезным для диагностики правильности оформления веб-страницы.

Для того, чтобы выделить полужирным шрифтом элементы, содержащие какую-либо информацию в атрибуте title, которая обычно отображается как всплывающая подсказка при появлении над элементом курсора, годится следующее правило:

*[title] {font-weight: bold;}

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

a[href][title] {font-weight: bold;}

Это правило выделит все гиперссылки, имеющие атрибут href и атрибут title.