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

Автор: Александр Головко Дата публикации: 16.02.2011

Предыдущая статья Селектор атрибутов.

Описание селектора:

  • Выполняемая задача — выбор всех элементов по определенному псевдоклассу.
  • Обозначение — название псевдокласса (с предшествующим двоеточием).
  • Пример использования:

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

a:hover {
	color: #80bd34;
}

Подробнее про селекторы псевдоклассов

Псевдокласс — это фантомный класс, наличие которого зависит от состояния элемента или структуры документа в целом.

Все работает так, как будто в определенных условиях у какого-нибудь HTML-элемента автоматически появляется/пропадает некий класс. Названия этих классов-призраков и условия их появления известны заранее и это позволяет применять к таким элементам различные стили (т.е. менять их оформление).

Сами псевдоклассы, примеры их применения и поддержка браузерами очень подробно рассмотрены в нашем CSS справочнике. Для детального ознакомления с темой советую, после прочтения статьи обязательно заглянуть туда (CSS по стандартам, подраздел «Псевдоклассы»).

Набор псевдоклассов в CSS3 значительно расширен, но, к сожалению, большая их часть не поддерживается IE, аж до 9-ой версии (у других браузеров, традиционно поддержка значительно лучше). Так что до реального использования CSS3 псевдоклассов на большинстве обычных сайтов еще очень долго. Для тех, кто интересуется CSS3 селекторами скоро появится соответствующая статья. Здесь же мы рассмотрим именно безопасно (с точки зрения кроссбраузерности) применяющиеся CSS2 псевдоклассы.

Псевдоклассы CSS2

В CSS2 определены 4 группы псевдоклассов (часть из которых перекочевала из CSS1).

Псевдокласс :first-child

Задает стиль для элемента, являющегося первым потомком своего родителя. Если тебе не очень понятно, что такое родитель и потомок, можно посмотреть подробную статью Дерево документа HTML.

Пример. Убираем маркер у первого элемента списка:

li:first-child{
	list-style: none;
} 

Замечание! IE6 не понимает этот псевдокласс. Но это не проблема, так как научить Осла выделять первый потомок можно с помощью приема, описанного в статье Псевдокласс :first-child для ИЕ6

Псевдоклассы ссылок

В этой категории два псевдокласса :link и :visited. Позволяют задавать стили для элементов, являющихся ссылками (под такими понимаются элементы, имеющие атрибут href) и для тех ссылок, на которые пользователь уже нажимал.

Пример. Задаем цвет для посещенных ссылок:

a:visited {
	color: #80bd34;
} 

Динамические псевдоклассы

Эти псевдоклассы применяются к элементам в зависимости от действий пользователя. CSS2 определяет три таких псевдокласса — :hover, :active и :focus.

  1. :hover — элемент, над которым находиться указатель мыши. Как только указатель уходит за пределы элемента, стили, заданные этим псевдоклассом, отменяются.
  2. :active — элемент, активированный пользователем (например, ссылка или кнопка в момент щелчка).
  3. :focus — элемент, которому принадлежит фокус ввода.

Пример. При наведении мыши на ссылку убираем подчеркивание:

a:hover {
	text-decoration: none;
}

Динамические псевдоклассы часто применяются для «оживления» странички — создания эффекта реакции элементов на действия пользователя без применения скриптов. Но в таком методе есть хитрый подводный камень. Дело в том, что применение динамического псевдокласса не обязывает браузер перерисовавать всю страницу!

Конечно, если при наведении мыши меняется цвет элемента или его подчеркивание, то проблем не будет. Сам «подопытный» элемент обязательно перерисуется. А вот, если ты задумаешь, например, увеличить ему шрифт (в результате чего соседние элементы, скорее всего вынуждены будут сдвинуться, а в особо сложных случаях, допустим, переехать на другую строку или попасть в другую колонку), то кроссбраузерности тебе никто не гарантирует. Конечно, многие браузеры все перерисуют корректно. Но в спецификации четко сказано «не обязаны». Это может вылиться как в кривизну отображения, так и просто в игнорирование проблемного стиля, заданного для динамического псевдокласса.

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

Используется для выбора элементов по их языку. Код языка указывается в круглых скобках.

При этом, согласно спецификации, информация о языке может быть получена и нескольких источников, таких как атрибут lang, метатег Content-language, информация из протокола (HTTP-заголовок).

Пример. Все французские надписи отобразим красным цветом:

p:lang(fr){
	color: red;
} 

Комбинирование псевдоклассов

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

Пример. Скроем маркер первого элемента списка, а при наведении на него мышки — отобразим:

li:first-child{
	list-style: none;
}
li:first-child:hover{
	list-style:disc;
} 

Примечание! Комбинирование псевдоклассов, так же как и множественные классы, некорректно работает в IE.

Область применения

Селекторы псевдоклассов — постоянные спутники почти любого CSS. Если ты используешь сброс стилей (а я настоятельно советую его использовать), то ты уже применяешь псевдоклассы ссылок и динамические псевдоклассы.

Сами по себе динамические псевдоклассы часто используются в элементах форм ввода либо для задания поведения ссылок или активных элементов.

Наконец грамотное применение :first-child позволяет упростить и уменьшить HTML-код, например, как описано в статье Убираем класс для первого элемента.

Следующая статья — Селекторы псевдоэлементов.