Блог divbyzero

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

19 марта 2010 года | Вёрстка

Этот год насыщен работой и событиями, тяжело поддерживать постоянность в написание толковых статей или переводов. Но, не всегда больше — лучше.

Совсем недавно я рассказывал, как сделать равноудалённые блоки с помощью псевдо-селектора first-child, и пришло время раскрыть полностью эту тему.

Я уверен, что опытные верстальщики используют их в своей верстке, так как это облегчает решение проблем. Новичкам будет интересно узнать о динамических возможностях CSS, а профессионалам вёрстки эта статья может стать повторением или памяткой.

Теория

Что же такое псевдоклассы? Как уже и сказал, они определяют динамическое поведение элементов, которые вызваны пользователем, а также могут реагировать на положение элемента в документе и на его контентное содержание.

Работу таких вот динамических стилей можно увидеть почти на каждом сайта, например при наведении на ссылку, он изменяет своё цвет, либо добавляется/убирается подчеркивание. Всё это именно «работа» псевдоклассов, а не скриптов.

Конечно, огромных возможностей нет, это всё таки стили, а не скрипты. Поэтому перейду к синтаксису и описанию возможных селекторов. Не переживайте, их не так уж и много.

Синтаксис

Наверное, удобнее всего показать синтаксис на примере, поэтому смотрим:

А для тех, кто любит общий синтаксис вот такой пример:

Синтаксис довольно простой. Да и возможных селекторов не так много. Но они делятся на несколько групп. Рассмотрю каждую группу в отдельности.

Ссылочные псевдо-селекторы

:link — можно считать самым запутанным ссылочным псевдоклассом. Он применяется на все ссылки которые содержат атрибут href. Полезного мало чего можно найти, но упомянуть стоит.

:visited — применяется на все посещённые ссылки этим браузером.

:hover — этот стиль будет установлен, когда пользователей наведёт курсор мыши на элемент.

:active — этот селектор сработает в момент когда текущий элемент активирован, например на него кликнули курсором. Что даёт возможно обработать ссылку, как нажатую кнопку.

Селекторы для элементов ввода и ссылок

:focus — используется когда происходит изменение фокуса текущего элемента при помощи клавиатуры. Например, когда вы заполняете форму, и между полями переключаетесь клавишей Tab.

Поэтому, тут не ограничивается ссылками, но и может быть использован (и успешно используется) в инпутах (input) и текстареях (textarea). Многие совмещают :focus и :hover, для удобство навигации с помощи клавиатуры, об это я подробнее расскажу в будущей статье.

На этой форме видно, что фокус установлена на элемент ввода Отчества, и поле подсвечено более светлым фоном.

:target — это направленный селектор связанный с определённым ID элемента. И выполняется, когда хэштег текущего URL совпадает в ID элемента. Например, если вы находитесь на сайте с ссылкой www.yoursite.com/#player, тогда селектор #player:target сработает.

:enabled — выбирает элементы, которые находятся в состоянии по-умолчанию и готовы к использованию.

:disabled — этот селектор, наоборот сработает на отключенных элементах, содержащих атрибут disabled. Многие браузеры и так делаю этот элемент затемнённым и серым, а тут вы можете сами контролировать его свойства.

На этой форме видно, что поле «Фамилия», затемнено и не может иметь фокуса.

:checked — применяется для чекбоксов (checkbox), чтобы определить отмеченный элемент.

:indeterminate — этот сложный для запоминания селектор используется во время когда в радиогруппе (radiogrioup) не выбран ни один radio-элемент (например, когда страница загружена, и нет выбора по умолчанию).

Позиционные и нумерованные селекторы

:root — выберет элемент, который лежит в основе документа. Почти всегда это будет html-тег. Но если у вас, например, xml-документ, то этот селектор может пригодится.

:first-child — выбирает первый дочерний элемент в пределах родительского.

:last-child — аналогично предыдущему, только выбирается последний дочерний элемент, также в пределах родителя.

:nth-child(N) — позволяет выбрать элементы основанные на простой математической формуле, например 2n или 4n -1. Это позволяет манипулировать элементами, то есть выделять каждый «третий», «пятый».

:nth-of-type(N) — этот селектор «берёт поглубже», и отличается от предыдущего тем, что влияет на дочерние элементы попадающих под условия опять же элементов. Например, у нас есть блоки внутри которого несколько изображений, и мы ставим задачей, чтобы каждый такой чётный блок был с нужными нам стилями:

:first-of-type — позволяет выбирать первый дочерний элемент заданного типа в пределах родительского. Например, если у нас несколько блоков содержащих внутри себя несколько абзацев, можем создать условие, чтобы был выбран каждый первый абзац, каждого блока.

:last-of-type — аналогично предыдущему селектору, только выбирается последний дочерний элемент в родительском.

:nth-last-of-type(N) — работает как :nth-of-type, но начинает отсчёт снизу (с последнего элемента), а не сверху.

:nth-last-child(N) — работает как :nth-child, но начинает своё отсчёт с последнего элемента.

:only-of-type — выбираются дочерние элементы, которые являются единственными в своём роде в родительском элементе.

Ниже на картинке, можно визуально рассмотреть некоторые примеры селекторов.

Реляционные селекторы

:not(S) — выбирают все подходящие по типу элементы, кроме элементов подходящих под параметр. Например, нам нужно выделить все абзацы, кроме абзаца с классом copyright. Для этого используем такую конструкцию:

Спецификация говорит, что селектор :not не может быть вложенным, но может составлять цепочку

Некоторые браузеры (например, Firefox) позволяют использовать цепочку таких параметров, что увеличивает возможности выборки элементов.

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

:empty — этот псевдокласс поможет выбрать пустые теги. Например, если у нас есть пустой абзац, его можно выделить вот так:

Текстовые селекторы

:first-letter — выбирает первую букву текста в элементе.

:first-line —выбор первой строки текста в элементе.

:lang — этот селектор новинка CSS3, и пока реализован только в IE8, что позволяет опираясь на атрибут lang в элементе применить определённый стиль. Например, для выбора русского языка:

::selection — позволяет изменить цвет выделения текста в элементе. Например, можно указать цвет выделения в первом абзаце:

Контенто-зависимые селекторы

:before — позволяет добавить контент перед элементом. Например, если необходимо добавить кавычки к цитате.

:after — позволяет добавлять контент после элемента. Например, по принципу предыдущего примера, добавляем кавычки после цитаты. А также используют для добавления пустого пространства, после элемента. так называемый clearfix, без использования дополнительной HTML-разметки.

Поддержка

Селекторы очень полезны и в современной вёрстке без них никуда не деться. Одни есть ещё с CSS2, другие как новинка появляются в CSS3. И браузеры радуют поддержкой, кроме IE. Даже восьмая версия (текущая на момент написания статьи) не имеет нормальной поддержки. Но совсем недавно презентовали IE9, которая успешно справилась со всеми тестами.

Выводы

Так как CSS3 ещё полностью не утверждён, существует возможность добавления или удаления селекторов. Многие уже были удалены, например: :required, :optional, :read-only, :read-write.

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

В заключение хотелось бы узнать, какие селекторы используете вы? И главное, для чего вы их используете?