Знакомство с псевдо-классами.

Перевод статьи: Meet the Pseudo Class Selectors.
Автор: Chris Coyier

Селекторы псевдо-классов — это CSS селекторы с предшествующим им двоеточием. Вы, вероятно, многократно встречали конструкции подобную этой:

a:hover {
/* вот вам и псевдо-класс :hover */
}

Псевдо-классы очень полезны и в отдельных случаях без них просто не обойтись. Они определены в различных CSS спецификациях (CSS2 или CSS3) и без проблем поддерживаются большинством браузеров, за исключением IE. В браузерах семейства Internet Explorer, даже включая IE8, псевдо-классы поддерживаются очень слабо. И хотя в последней версии IE9 заявлена их полная поддержка, все же уверенно работают псевдо-классы гиперссылок и лишь часть других, но о полноценной поддержке CSS3 спецификации в IE говорить еще рано. В данной статье рассматриваются все имеющиеся псевдо-классы. Их не так уж и много, поэтому давайте вкратце остановимся на каждом из них.

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

:link — Целесообразность применения этого псевдо-селектора для ссылок вызывает сомнения. Ведь элементы <a> сами по себе являются ссылками, не так ли? Хотя не всегда, а только в том случае, если в них содержится атрибут href. А псевдо-класс :link и определяет именно такие элементы-ссылки, т.е. он эквивалентен селектору атрибута a[href]. Пользы от этого селектора будет значительно больше, если функциями гиперссылки будет наделен каждый элемент разметки. (*На ресурсе демонстрируются эти возможности, когда элементы параграфов <p>, блочные элементы <div>, компоненты табличной структуры <tr>, <td> и т.д., помимо своих прямых обязанностей выполняют роль ссылок.)

:visited — Этот селектор применяется к ссылкам, которые уже были активированы ранее в используемом браузере.

:hover — Селектор относится к ссылкам (*и не только), на которых наведен курсор мыши. Именно в период нахождения курсора над элементом, его состояние будет соответствовать псевдо-классу :hover.

:active — Выбирает ссылки в момент их активации (клик мышью или нажатие клавиши "Enter"). Этот псевдо-класс, к примеру, может применяться для придания ссылкам эффекта нажатой кнопки (*более подробно этот случай рассмотрен в здесь).

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

Изображение

:focus — Возможность определения стилей для ссылок при наведении на них курсора мыши (псевдо-класс :hover) – очень полезный инструмент, но он не позволяет достигнуть желаемого эффекта в том случае, если ссылка активируется при помощи клавиатуры. Именно для реализации такой возможности предназначен псевдо-класс :focus. Его можно использовать не только для ссылок, но и применительно к элементам формы (<input> и <textarea>), которые тоже могут получать фокус в процессе взаимодействия с пользователем. Некоторые разработчики рекомендуют определять псевдо-класс :focus для всех элементов, использующих псевдо-класс :hover. На рисунке представлена форма, элемент которой <textarea>, предназначенный для ввода электронного адреса, в данный момент имеет фокус и при этом его фон приобретает желтый цвет.

:target — Этот псевдо-класс применяется только в том случае, если для соответствующего элемента определен атрибут id и его значение совпадает с используемым в текущем URL адресе анкором. К примеру, если вы находитесь по адресу www.site.com/page.html#home, то CSS свойства, определенные в пределах правила для селектора #home :target будут применяться для форматирования соответствующего элемента (с id="home"). Такая взаимосвязь может очень эффективно применяться на практике. Удачный пример, иллюстрирующий применение псевдо-класса :target описан в этой статье.

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

Изображение

:disabled — Выбирает неактивные элементы ввода, имеющие атрибут disabled. Большинство браузеров отображают эти элементы в серых тонах, таким образом выделяя их на фоне активных. При помощи псевдо-класса :disabled можно применять свое стилевое оформление к таким элементам.

:checked — Соответствует отмеченным элементам ввода флажкам checkbox и выбранным радио-кнопкам radiobutton.

Изображение.

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

Псевдо-классы выбора элементов по их родственным и порядковым отношениям.

:root — Выбирает находящийся в корне документа элемент. Практически во всех случаях это <html> элемент, если только вы не работаете в какой-нибудь другой, отличной от HTML среде, поддерживающей CSS, например, в XML, где это может быть и совершенно другой находящийся в корне документа элемент.

:first-child — Относится к первому дочернему элементу, указанного типа (*К примеру, селектор div p:first-child соответствует первому элементу <p>, который является дочерним, то есть находится внутри предшествующего родительского элемента, в данном случае <div>).

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

:nth-child(N) — Этот псевдо-класс основан на порядковых позициях дочерних элементов, указанных в селекторе. В скобках указывается числовое значение, соответствующее позиции дочернего элемента, к которому будет применяться CSS правило. (*div:nth-child(3) указывает на третий по счету блок <div>, являющийся дочерним). В качестве аргумента также можно использовать алгебраическое выражение (типа 2n или 4n-1, определяющее позиции необходимых дочерних элементов. (*tr :nth-child(3n) будет применяться к каждому третьему ряду таблицы.) То есть разработчик получает возможность выбора элементов, располагающихся на четных, нечетных позициях или может использовать более сложные критерии отбора дочерних элементов, указанного типа. Подробнее данный вопрос рассматривается в этой статье . А здесь можно самостоятельно протестировать результат работы псевдо-класса :nth-child(N).

:nth-of-type(N) — Принцип действия этого псевдо-класса тот же, что и у предыдущего (:nth-child(N)), с тем отличием, что :nth-of-type(N) применяется для отбора N-го по счету элемента указанного типа, среди других элементов, находящихся на одном уровне вложенности. К примеру, внутри контейнера <div> вы имеете несколько абзацев <p> и несколько изображений <img>. Если вам необходимо выбрать все нечетные картинки, то псевдо-селектор :nth-child в этом случае не поможет. Здесь вам придется применить селектор div img:nth-of-type(odd). Этот псевдо-класс очень удобен для работы со списками определений <dl>, который позволяет выбирать необходимые компоненты таких списков <dt> (тег термина) и <dd> (тег определения).

:first-of-type — Селектор, содержащий этот псевдо-класс, относится к первому элементу указанного типа среди других, находящихся на одном уровне вложенности. К примеру, если вы имеете два контейнера <div> и каждый из них содержит как элементы параграфы, так и изображения, то селектор div img:first-of-type выберет первые элементы изображений <img> в обоих контейнерах <div>.

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

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

:nth-last-child(N) — Работает также как и :nth-child(N), но выборка соответствующих аргументу дочерних элементов производится с последнего.

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

Изображение.

На рисунке наглядно показаны принципы действия каждого псевдо-класса, основанные на родственных и порядковых отношениях.

Фильтрующие псевдо-классы.

:not(S) — Данный селектор псевдо-класса позволяет из уже сформированного набора элементов исключить ненужные, указав соответствующий им параметр в скобках селектора. К примеру, если необходимо выделить все, присутствующие в документе блоки <div>, за исключением тех, для которых установлен класс music, то достаточно воспользоваться селектором div:not(.music).

:empty — Относится к «пустым» элементам, то есть к тем, которые не содержат текст или дочерние элементы между открывающим и закрывающим тегами. (К примеру, <p></p> — является пустым.)

Псевдо-классы для работы с текстом элементов.

:first-letter — Правила, определенные в рамках селектора с этим псевдо-классом форматируют первый символ текста, находящегося внутри указанного элемента. (*Допустим, селектор div.music:first-letter позволит изменить стиль первой буквы во всех блоках имеющих класс music). Этот псевдо-класс, как правило, применяется для создания эффекта буквицы.

:first-line — Выбирает лишь первую строку текста внутри определенного элемента. Зачастую применяется для визуального выделения введения, предшествующего основному содержанию статьи.

:lang() — Этот псевдо-класс определен в последней спецификации (CSS3) и поддерживается IE восьмой версии и выше. Он позволяет выбрать любой элемент, который имеет атрибут lang с соответствующим значением или наследует его от родительского элемента. К примеру, псевдо-класс :lang(fr) будет соответствовать содержащим текст элементам даже без атрибута lang, если они являются потомками контейнера, допустим <body>, в котором определён атрибут lang="fr".

::selection — Позволяет изменять стилевое оформление выделенных пользователем фрагментов текста (*::selection является CSS псевдо-элементом, а автор упоминает его в статье, которая посвящена псевдо-селекторам, по причине его прямого отношения к форматированию фрагментов текста элементов страницы). Для браузера Firefox используется нестандартный псевдо-элемент ::-moz-selection. Более детально случай применения псевдо-элемента ::selection рассмотрен здесь .

Изображение

Для достижения желаемого результата вы можете формировать CSS селекторы, выстраивая цепочки из необходимых псевдо-классов, используя различные комбинации из имен идентификаторов и классов. В частности, такой прием может очень пригодиться для определения первого символа (:first-letter) и первой строки (:first-line) содержимого элемента. Вы, вероятно, не хотели бы, чтобы каждый параграф на странице был оформлен с использованием эффекта буквицы, а только самый первый из них. Поэтому для применения нужного форматирования лишь к первому параграфу необходимо использовать следующий селектор p:first-child:first-letter. На рисунке приведен пример буквицы, когда увеличивается размер первого символа и используется эффект его обтекания.

Псевдо-элементы для манипуляций контентом документа.

:before — Позволяет вставлять контент перед определенным элементом. Этот псевдо-элемент может пригодиться, когда вам, допустим, необходимо добавить кавычки перед элементом <blockquote>, предназначенным для длинных цитат или если вам нужно выделить определенный абзац, путем вставки перед ним какого-нибудь изображения.

:after — Дает возможность вставки контента после указанного элемента. К примеру, если вам нужно добавить закрывающие кавычки для все того же элемента <blockquoute>. Очень часто псевдо-элемент :after используется с целью отмены эффекта обтекания блока. Для этого, после требуемого элемента добавляется пустое место (*пробел), что отменяет обтекание без необходимости внесения изменений в исходный код документа.

В последних двух рассмотренных случаях используют не псевдо-классы, а псевдо-элементы потому, что они не применяются для выбора определенного, уже существующего в разметке страницы «реального» элемента, а создают новый, псевдо или другими словами «фиктивный» элемент (*подробнее о псевдо-элементах ). Здесь можно увидеть некоторое сходство с рассмотренными ранее псевдо-классами :first-letter и :first-line, которые выбирают не целый, существующий элемент, а лишь его часть (первую букву или строку «реального» элемента), то есть псевдо-элемент.

:contains() — Насколько мне известно, этот псевдо-класс уже устарел и в текущей CSS3 спецификации он отсутствует. На первый взгляд, данный селектор кажется очень полезным (он позволяет выбирать нужный элемент страницы по его текстовому содержимому). Я не знаю всей истории (если вы в курсе, пожалуйста, поделитесь), но отказ от этого способа отбора элементов, по-видимому, связан с какими-то трудностями или тем фактом, что в данном случае контент содержится непосредственно в CSS селекторе (*что противоречит принципам семантически корректного документа). Более правильный с точки зрения семантики вариант применения данного псевдо-класса – не использование находящегося в элементе текста, а указание типа дочернего элемента, который может находиться в пределах форматируемого родительского элемента (к примеру, p:contains(img) выбирает все параграфы, содержащие в себе изображения). Однако, как бы там ни было, этот псевдо-класс не рекомендован к использованию в будущем.

:required, :optional, :read-only, :read-write — Аналогично предыдущему селектору также считаются устаревшими, а их альтернативой являются соответствующие варианты селекторов атрибутов — input[required], input[readonly].

Использование псевдо-классов в jQuery.

Фреймворк jQuery допускает использование всех перечисленных выше псевдо-классов и элементов. Более того, в этой библиотеке предусмотрено несколько дополнительных, не менее полезных псевдо-классов.

:first — Данный класс соответствует первому экземпляру указанного в селекторе набора. Он отличается от псевдо-класса :nth-child(1), который относится к элементу только в том случае, если его тип соответствует указанному и если он является первым дочерним элементом. Псевдо-класс :first не учитывает какие-либо родственные отношения, а выбирает первый соответствующий указанному набору элемент.

:eq(N) — Библиотека jQuery не поддерживает селектор :nth-of-type (:nth-child поддерживается), но в набор собственных селекторов jQuery входит :eq(N), который является достойной альтернативой :nth-of-type. Селектор с таким псевдо-классом выбирает следующий N-й элемент, который соответствует указанному набору. Следует учитывать, что относясь к JavaScript библиотеке, этот селектор отсчитывает элементы начиная с нуля, а не с единицы. Но при использовании селектора :nth-child, для выбора первого элемента в качестве аргумента нужно указывать единицу :nth-child(1). Удобный инструмент, помогающий разобраться в тонкостях использования этих селекторов, находится здесь.

:contains('text') — Этот псевдо-класс удален из CSS, но все еще работает в jQuery.

:lt(X) — При помощи этого селектора можно выбрать все элементы, входящие в определенный набор, которые находятся до указанного по счету индекса элемента X. (*ul li:lt(3) выберет первый, второй и третий элемент списка. Третий элемент выбирается потому, что в этом случае отсчет индекса также ведется начиная с нуля – 0(1), 1(2), 2(3))

:gt(X) — Аналогичен предыдущему селектору, но при этом выбираются все следующие за указанным элементы (*Если список <ul> содержит 6 элементов, то jQuery селектор ul li:gt(3) выберет два последних – 4(5) и 5(6))

:even — Этот селектор эквивалентен CSS псевдо-классам :nth-child(even) или :nth-child(2n).

:odd — Аналог селекторов :nth-child(odd) или :nth-child(2n+1), выбирающих нечетный элемент (*в последнем случае для выбора первого элемента (тоже нечетного) значение n должно быть равно нулю. Как уже упоминалось, у CSS псевдо-классов индексирование элементов начинается с единицы).

:has(S) — Работает так же как и CSS селектор :conteins(), содержащий в качестве аргумента тип элемента. То есть в данном случае селектор выбирает элемент (или набор элементов), который имеет потомка, указанного в качестве аргумента типа (*ul li:has(a) выберет все элементы списка, которые в своем составе содержат ссылки).

jQuery содержит намного больше селекторов, предназначенных для отбора необходимых элементов, которые также очень полезны (по крайней мере, с точки зрения читабельности кода). Здесь можно увидеть полный список допустимых селекторов jQuery .

Библиотекой jQuery не предусмотрен какой-либо инструмент, обеспечивающий прямой доступ к CSS псевдо-элементам :before и :after, но желаемого результата можно добиться средствами JavaScript:

var content = window
.getComputedStyle($('div')[0], ':before')
.getPropertyCSSValue('content')
.cssText;

Однако этот код работает не во всех браузерах.

Специфичность CSS селекторов.

В CSS спецификации селекторы классов и псевдо-классов имеют один и тот же уровень приоритетности (а точнее имеют равные значения специфичности).

li {} /* specificity = 0,0,0,1 */
li:first-line {} /* specificity = 0,0,1,1 */
li.red {} /* specificity = 0,0,1,1 */

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

ul li.friend { margin: 0 0 5px 0; }
ul li:last-child { margin: 0; }

В приведенном примере обнуление всех отступов элемента списка (margin:0) будет работать (подразумевается, что первый и второй селекторы соответствуют одному списку <ul>), но только лишь потому, что правило обнуления всех отступов находится ниже, а не потому, что оно обладает приоритетом (оба правила имеют один уровень специфичности). Поэтому эти моменты всегда необходимо учитывать.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *