Всем привет. В самом начале своей работы в веб-дизайне, я изучал все тяжелым способом: методом проб и ошибок. Тогда не было Smashing Magazine, Can I Use, CodePen и прочих волшебных вещей, окружающих нас сегодня. Если бы раньше кто-либо показал мне азы веб дизайна, особенно по части CSS, это было бы невероятно полезно.

Если вы опытный веб-дизайнер или разработчик, то вы должны знать большинство обсуждаемых здесь псевдоклассов и псевдоэлементов. Однако я рекомендую вам ознакомиться с , возможно, вы встретите что-то незнакомое для себя.

Перед тем как погрузиться в вопрос, разберемся с терминами - если в названии есть псевдоклассы и псевдоэлементы, то что значит часть слова “псевдо”? Вот что говорит dictionary.com :

прилагательное 1. Ненастоящий, но похожий внешне; притворяющийся; ложный или мнимый 2. Почти такой же или пытающийся быть таким же

Не перегружаясь техническим определением W3C, псевдокласс можно определить, как фантомное состояние или специфическую характеристику элемента, которая может быть выделена с помощью CSS. Наиболее распространенные псевдоклассы это:link , :visited , :hover , :active , :first-child и:nth-child . Существуют и другие псевдоклассы, им мы тоже уделим внимание.

Псевдоклассы в стилях всегда выделяются предшествующим двоеточием (:), затем идет название псевдокласса и иногда значение в скобках.

Псевдоэлементы похожи на виртуальные элементы, которые мы можем обрабатывать как обычные HTML-элементы. Но они не существуют в дереве документа или в DOM, мы создаем их с помощью CSS.

Наиболее распространенные псевдоэлементы это:after , :before и:first-letter , мы рассмотрим их в конце статьи.

Одно или два двоеточия ставить перед псевдоэлементами?

Короткий ответ для большинства случаев - без разницы.

Двойное двоеточие (::) было добавлено в CSS3, чтобы дифференцировать для различения псевдоэлементов типа::before и::after от псевдоклассов, таких как:hover и:active . Все браузеры поддерживают двойное двоеточие, кроме Internet Explorer (IE) 8 и ниже.

При этом некоторые псевдоэлементы, например, ::backdrop работают только с двойным двоеточием.

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

Вы можете выбрать любой вариант, здесь нет однозначного “за” или “против”.

Однако спецификация на момент написания статьи рекомендует использовать одно двоеточие , по уже упомянутой здесь причине - обратной совместимости.

Не забывайте, что в CSS3 псевдоэлементы выделяются двойным двоеточием, типа a::after { … } , для их отличия от псевдоклассов. Вы можете иногда это видеть в CSS. При этом CSS3 также позволяет использовать одно двоеточие ради обратной совместимости и в настоящее время мы рекомендуем придерживаться этого синтаксиса.

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

Когда использовать и не использовать генерируемый контент в CSS

Генерируемый контент в CSS реализуется с помощью комбинации свойства content с псевдоэлементами:before или:after .

Контентом может быть простой текст или контейнер, которым мы манипулируем при помощи CSS, чтобы выводить графическую форму или декоративный элемент . Здесь я буду говорить о первом типе контента - тексте.

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

  • Он будет недоступен скрин-ридерам;
  • Он будет невыделяем;
  • Если генерируемый контент использует излишнее содержание для украшения, скрин-ридеры будут читать его, что ухудшит впечатления пользователей.

Используйте генерируемый контент для декорации и незначительного текста, но убедитесь, что он правильно обрабатывается скрин-ридерами, чтобы использующие эту технологию не отвлекались на него. Основывайтесь на методике “прогрессивного улучшения”, когда собираетесь использовать генерируемый контент.

На Smashing Magazine есть отличная статья Габриеля Романато об использовании генерируемого контента.

Экспериментальные псевдоклассы и псевдоэлементы

Экспериментальными называют те псевдоклассы и псевдоэлементы, чья спецификация еще не стабильна и не окончательна. Их синтаксис и поведение еще могут измениться.

Однако мы можем использовать экспериментальные псевдоклассы и псевдоэлементы с помощью вендорных префиксов; о поддержке вы можете узнать с помощью Can I Use , а для удобства работы есть такие инструменты как -prefix-free или Autoprefixer .

В этой статье у всех экспериментальных псевдоклассов и псевдоэлементов будет соответствующая пометка.

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

Мы начнем с псевдоклассов для определенных состояний.

Псевдоклассы состояний

Псевдоклассы состояний обычно применяются после действий пользователя. При этом “действием” может считаться и отсутствие действия, например, в случае с непосещенной ссылкой.

Итак, рассмотрим их.

:link

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

A:link { color: orange; }

Этот псевдокласс можно пропустить:

A { color: orange; }

Псевдокласс:visited используется для стилизации ссылок, уже посещенных пользователем. В стилях он указывается вторым, после псевдокласса:link:

A:visited { color: blue; }

:hover

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

A:hover { color: orange; }

:active

Псевдокласс:active используется для стилизации “активированных” элементов, путем нажатия мыши или касания к экрану. Активация также может производиться и с клавиатуры, также как в случае с псевдоклассом:focus .

Он и работает аналогично:focus , с единственной разницей, что псевдокласс:active фиксирует событие между нажатием и отпусканием клавиши мыши.

Оно следует четвертым в стилях (после:hover).

A:active { color: rebeccapurple; }

:focus

Псевдокласс:focus используется для стилизации элемента, получившего фокус с помощью курсора, касания или нажатия на клавиатуре. Он часто используется в элементах форм.

A:focus { color: green; }

Input:focus { background: #eee; }

Бонус: миксин Sass для ссылок

Если вы используете препроцессоры CSS, типа Sass, этот раздел должен заинтересовать вас. Если вы их не используете (не бойтесь, это нормально), вы можете пропустить его.

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

Идея миксина состоит в отсутствии настроек по умолчанию в качестве аргументов, мы просто декларируем все 4 состояния ссылок.

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

Учтите, этот миксин может быть применен к любому элементу HTML, не только к ссылкам. Вот он:

@mixin links ($link, $visited, $hover, $active) { & { color: $link; &:visited { color: $visited; } &:hover { color: $hover; } &:active, &:focus { color: $active; } } }

Использование:

A { @include links(orange, blue, yellow, teal); }

Скомпилированный результат:

A { color: orange; } a:visited { color: blue; } a:hover { color: yellow; } a:active, a:focus { color: teal; }

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

Структурные псевдоклассы направлены на дополнительные данные в дереве документа или DOM и не могут быть заменены другим типом селекторов или их комбинацией.

:first-child

Псевдокласс:first-child выделяет элемент, который является первым потомком своего родительского элемента.

В следующем примере только первый элемент li будет выделен оранжевым текстом.

  • This text will be orange.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
li:first-child { color: orange; }

:first-of-type

Псевдокласс:first-of-type выделяет первый элемент своего типа в указанном родительском контейнере.

В следующем примере первый элемент li и первый элемент span будут выделены оранжевым цветом.

  • This text will be orange.
  • Lorem ipsum dolor sit amet. This text will be orange.
  • Lorem ipsum dolor sit amet.
ul:first-of-type { color: orange; }

:last-child

Псевдокласс:last-child выделяет элемент, которыя является последним дочерним элементом в родительском контейнере.

В следующем примере, последний элемент li будет выделен оранжевым цветом.

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • This text will be orange.
li:last-child { color: orange; }

:last-of-type

Псевдокласс:last-of-type выделяет последний элемент своего типа в родительском контейнере.

В следующем примере, текст в последнем li и последнем span будет оранжевым.

  • Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. This text will be orange.
  • Lorem ipsum dolor sit amet.
  • This text will be orange.
ul:last-of-type { color: orange; }

:not

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

В следующем примере, псевдокласс:not выберет все элементы, не подпадающее под селектор-аргумент. Оранжевым будет весь текст, кроме элемента li с классом.first-item:

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
li:not(.first-item) { color: orange; }

Теперь попробуем сделать цепочку из двух псевдоклассов:not . У всех элементов будет черный цвет и желтый фон, кроме элемента li с классом.first-item и последнего li в списке.

Li:not(.first-item):not(:last-of-type) { background: yellow; color: black; }

:nth-child

Псевдокласс:nth-child выделяет один или более элементов в зависимости от их порядкового номера в разметке.

Это один из самых универсальных и надежных псевдоклассов в CSS.

Все псевдоклассы:nth принимают аргумент в виде формулы в скобках. Формула может быть просто целым числом, может структурироваться в виде an+b или использовать ключевое слово odd или even .

В формуле an+b:

  • a это целое число;
  • n это литерал (т.е. мы просто используем букву n внутри формулы);
  • + это оператор (это может быть как + , так и -);
  • b это целое число, используемое только при использовании оператора.

Вот список с греческим алфавитом, на базе которого мы сделаем несколько примеров:

  1. Alpha
  2. Beta
  3. Gamma
  4. Delta
  5. Epsilon
  6. Zeta
  7. Theta
  8. Iota
  9. Kappa

Выделим второй элемент в списке, только “Beta” будет оранжевой:

Ol:nth-child(2) { color: orange; }

Теперь выделим все элементы с порядковыми номерами, кратными двум. Оранжевыми будут “Beta,” “Delta,” “Zeta,” “Theta” и “Kappa”:

Ol:nth-child(2n) { color: orange;}

Те же самые четные элементы можно выделить и с помощью ключевого слова even:

Ol:nth-child(even) { color: orange; }

А теперь выберем все элементы кратные двум, начиная с шестого. Итак, оранжевыми будут “Zeta,” “Theta” и “Kappa”.

Ol:nth-child(2n+6) { color: orange; }

:nth-last-child

Псевдокласс:nth-last-child работает аналогично:nth-child , но выбирает элементы не с начала, а с конца.

Продолжим мучать греческий алфавит. Выберем второй элемент с конца - оранжевой у нас будет только “Iota”:

Ol:nth-last-child(2) { color: orange; }

Теперь выберем все дочерние элементы по порядковому номеру с конца, кратному двум. Это будут Iota,” “Eta,” “Epsilon,” “Gamma” и “Alpha”:

Ol:nth-last-child(2n) { color: orange; }

Теперь выделим их же с помощью ключевого слова:

Ol:nth-last-child(even) { color: orange; }

И, наконец. выберем все элементы с конца кратные двум начиная с шестого. “Epsilon,” “Gamma” и “Alpha”!

Ol:nth-last-child(2n+6) { color: orange; }

:nth-of-type

Псевдокласс:nth-of-type схож с:nth-child с той разницей, что он обладает большей специфичностью, так как выбирает конкретный тип элемента внутри родительского контейнера.

В следующем примере, оранжевый цвет будет у второго параграфа.

Heading Goes Here

Lorem ipsum dolor sit amet.

This text will be orange.

p:nth-of-type(2) { color: orange; }

:nth-last-of-type

Псевдокласс:nth-last-of-type делает то же, что и:nth-of-type , но отсчитывая с конца.

В следующем примере мы будем выбирать второй параграф с конца (это будет первый параграф в статье):

Heading Goes Here
/h1>

This text will be orange.

Lorem ipsum dolor sit amet.