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

Теперь рассмотрим простые селекторы, которые являются уточнением базовых селекторов. Выше мы уже познакомились с двумя типами простых селекторов, которые применяются для задания стилей HTML-документов: селекторы классов и селекторы идентификаторов. Здесь мы познакомимся еще с одной группой селекторов, а именно с селекторами атрибутов. Эти селекторы обладают мощным и гибким синтаксисом и предназначены для работы с любыми документами, которые поддерживаются языком CSS. К сожалению, они пока не поддерживаются Веб-обозревателями. Существуют четыре вида селекторов атрибутов:

[attr]

Применяется ко всем элементам, имеющим атрибут attr, независимо от его значения.

[attr=value]

Применяется ко всем элементам, чей атрибут attr имеет значение value.

[attr~=value]

Применяется ко всем элементам, чей атрибут attr имеет состоит из списка значений, разделенных пробелами, и одно из этих значений равно value.

[attr|=value]

Применяется ко всем элементам, чей атрибут attr имеет значение, состоящее из нескольких "слов", разделенных дефисом, причем первое из этих слов равно value (первоначально предназначалось для выделения кода основного языка из полного кода языка).

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

Псевдоклассы позволяют применять различные стили к элементам, в зависимости от их состояния.

К примеру, к ссылке могут быть применены различные стили в зависимости от того, является ли ссылка еще не посещенной, находится ли в "фокусе" курсора.

Доступны следующие "состояния" элементов:

· active – стиль применяется к элементу, активированному пользователем;

· link – стиль применяется к непосещенным ссылкам;

· focus – стиль применяется к элементу при получении им фокуса;

· hover – стиль активизируется, когда курсор находится в пределах элемента;

· visited – стиль применяется к посещенным гиперссылкам;

· first- child – стиль применяется к первому дочернему элементу селектора.

Пример оформления стилей псевдоклассов:

a:link {color: red}