Руководство по псевдоклассам и псеводэелментам в css

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

Перед тем, как погружаться в дебри css, давайте разберемся, что же означает слово "псевдо"? Из определений на gufo.me можно узнать:

Псевдо — Префикс, означающий ложный, фальсифицированный, поддельный. Подразумевается, что "псевдо" событие или объект является копией реального события или объекта. 

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

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

В свою очередь, псевдоэлементы - своего рода вирутальные элементы, к которым можно обращаться как к обычным HTML-элементам. Единственное их отличие в том, что они отсутствуют в дереве документа или DOM, то есть псевдоэлементы не содержатся в коде html-страницы, а создаются при помощи CSS.

Среди наиболее распространенных элементов можно выделить :after, :before и :first-letter. О них мы поговорим ниже в этой статье.

Одиночное или двойное двоеточие?

Если коротко, то, в большинстве случаев - не имеет значения.

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

В то же время, некоторые псевдоэлементы (например, ::backdrop), доступны только черед двойное двоеточие.

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

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

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

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

Когда (не) генерировать контент при помощи CSS

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

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

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

  • он будет доступен не для всех скрин-ридеров
  • его нельзя будет выделить
  • если скринридер, поддерживающий CSS-контент, наткнется на сгенерированный таким образом но используемый в качестве оформления текст, он прочтет его, и, тем самым, еще сильнее затрудни восприятие информации

CSS-контент следует использовать для оформления страницы или передачи не важной информации, убедившись, что скрин-ридеры корректно его обрабатывают. Вот, в качестве примера, замечательная статья в Smashing Magazine, написанная Gabriele Romanato об использовании сгенерированного CSS контента.

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

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

В то же время, добавляя префиксы мы можем использовать экспериментальные псевдоклассы и псевдо-элементы не дожидаясь окончания работы над их спецификацией. В таком случае необходимо сверится с Can I Use и использовать какую-нибудь утилиту для автоматического добавления префиксов в CSS, вроде -prefix-free или Autoprefixer.

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

Содержимое (в алфавитном порядке)

Ну что же, вроде все, давайте наконец-то начнем представление!

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

Начнем обсуждение псевдоклассов с относящихся к состоянию

Состояние

Псевдоклассы, характеризующие состояние, вступают в действие, когда пользователь совершает действие. "Действие" в CSS так же может означать "отсутствие действия", как в случае со ссылкой, которую еще не посещали.

Давайте рассмотрим их поближе.

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

a:link {
  color: orange;
}

Если стили ссылок описывать, как на примере ниже, то :link можно опустить:

a {
  color: orange;
}

:VISITED

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

a:visited {
    color: blue;
}

:HOVER

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

Он должен определяться третим, после :visited.

a:hover {
    color: blue;
}

:ACTIVE

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

В целом, этот псевдокласс срабатывает аналогично с :focus, отличие в том, что событие, вызывающее :active-состояние происходит при нажатии и освобождении кнопки мыши.

Этот псевдокласс следует определять четвертым в очереди, после :hover

a:active {
    color: rebeccapurple;
}

:FOCUS

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

a:focus {
    color: green;
}

Или:

input:focus {
    background: #eee;
}

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

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

:FIRST-CHILD

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

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

HTML:

<ul>
    <li>Этот текст будет оранжевым</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS:

li:first-child {
    color: orange;
}

:FIRST-OF-TYPE

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

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

HTML:

<ul>
    <li>Этот текст будет оранжевым.</li>
    <li>Lorem ipsum dolor sit amet. <span>Этот текст тоже будет оранжевым.</span></li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS:

ul :first-of-type {
    color: orange;
}

:LAST-CHILD

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

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

HTML:

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Этот текст будет оранжевым</li>
</ul>

CSS:

li:last-child {
    color: orange;
}

:LAST-OF-TYPE

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

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

HTML:

<ul>
    <li>Lorem ipsum dolor sit amet. </li>
    <li>Lorem ipsum dolor sit amet. <span>Обычный текст.</span> <span>Этот текст тоже будет оранжевым.</span></li>
    <li>Этот текст будет оранжевым.</li>
</ul>

CSS:

ul :last-of-type {
    color: orange;
}

:NOT

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

CSS-правила, могут содержать последовательно связанные :not псевдо-классы, но в передаваемых аргументах :not присутствовать не может.

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

HTML:

<ul>
    <li class="first-item">Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS:

В данном случае, все текст имеет оранжевый цвет, за исключением элемента li с классом .first-item:

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-child принимает аргумент-формулу в круглый скобках. В качестве формулы может выступать единственное целое число, может быть выражение вида an+b или ключевые слова odd или even.

В случае an+b формулы:

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

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

<ol>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
    <li>Epsilon</li>
    <li>Zeta</li>
    <li>Eta</li>
    <li>Theta</li>
    <li>Iota</li>
    <li>Kappa</li>
</ol>

CSS:

Давайте выберем второй дочерний элемент. В нашем случае, только "Beta" будет иметь оранжевый цвет:

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

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

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

Выберем все четные дочерние элементы:

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

Изменим формулу, чтобы выбраными были все дочерние элементы, начиная с шестого, то есть “Zeta,” “Theta” и “Kappa” будут иметь оранжевый цвет:

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

:NTH-LAST-CHILD

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

CSS:

Давайте выберем второй дочерний элемент начиная с конце. В нашем случае, только "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-child(2n+6) {
    color: orange;
}

:NTH-OF-TYPE

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

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

HTML:

<article>
    <h1>Заголовок</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <a href=""><img src="images/rwd.png" alt="текст"></a>
    <p>Этот текст будет оранжевым.</p>
</article>

CSS:

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

:NTH-LAST-OF-TYPE

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

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

HTML:

<article>
    <h1>Заголовок</h1>
    <p>Этот текст будет оранжевым.</p>
    <a href=""><img src="images/rwd.png" alt="текст"></a>
    <p>Lorem ipsum dolor sit amet.</p>
</article>

CSS:

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

:ONLY-CHILD

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

В следующем примере, первый ul элемент имеет единственный дочерний элемент, текст в котором будет окрашен в оранжевый цвет. Второй ul элемент имеет несколько дочерних элементов, и поэтому селектор с :only-child не будет применен на них.

HTML:

<ul>
    <li>Этот текст будет оранжевым.</li>
</ul>

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS:

ul :only-child {
    color: orange;
}

:ONLY-OF-TYPE

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

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

HTML:

<ul>
    <li>Этот текст будет оранжевым.</li>
</ul>

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS:

li:only-of-type {
    color: orange;
}

:TARGET

Псевдокласс :target ну... Позволяет выбрать элемент с уникальным id, когда его id совпадает с хешем в URL.

В следующем примере, статья с id target будет выбрана, если URL в браузере оканчивается на #target.

URL:

http://awesomebook.com/#target

HTML:

<article id="target">
    <h1><code>:target</code> pseudo-class</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
</article>

CSS:

:target {
    background: yellow;
}

Хозяйке на заметку: вместо background-color можно использовать сокращение background.

Проверка (валидация)

Формы всегда были проклятьем веб-дизайна и разработки. Используя псевдоклассы проверки можно сделать процесс заполнения форм более гладким и приятным.

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

:CHECKED

Псевдокласс :checked позволяет выбрать отмеченные переключатели (radio buttons), чекбо́ксы и option-элементы.

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

Демо: CSS :checked псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

:DEFAULT

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

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

Обратите внимание, что использование кнопок "Очистить" или "Сбросить" в формах приводит к серьезным проблемам с юзабилити. Избегайте их, за исключением случаев, когда такие кнопки абсолютно необходимы. В следующих статьях объясняется почему:

Демо: CSS :default псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

:DISABLED

Псевдокласс :disabled используется для выделения элементов в деактивированном (disabled) состоянии. Такие элементы не могут быть выбраны, активированы или получить фокус.

В следующем примере, поле для вода name отключено, и поэтому будет отображаться с прозрачностью в 50%.

HTML:

<input type="text" id="name" disabled>

CSS:

:disabled {
    opacity: .5;
}

Хозяйке на заметку: в разметке не обязательно использовать disabled="disabled". Для деактивации элемента достаточно просто наличия атрибута disabled. В то же время стандарт XHTML требует полного указания disabled="disabled".

Демо: CSS :disabled псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

:EMPTY

Псевдокласс :empty позволяет выделить элементы, не имеющие содержимого. Если внутри элемента есть символ (буква), другой HTML-элемент или хотя бы пробел, то такой элемент уже не будет считаться пустым.

Вот что считается пустым, а что нет:

  • Пустой элемент: не содержит никаких символов внутри элемента в разметке. HTML-комментарий в этом случае за соедржимое не считается.
  • Не пустой элемент: содержит хоть какие-то символы внутри. Даже пробел будет считаться содержимым.

В следующем примере:

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

HTML:

<div>This box is orange</div>
<div> </div>
<div></div>
<div><!-- This comment is not considered content --></div>

CSS:

div {
  background: orange;
  height: 30px;
  width: 200px;
}

div:empty {
  background: yellow;
}

Демо: CSS :emapty псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

:ENABLED

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

Комбинации :enabled и :disabled можно использовать для визуального выделения элементов исходя из их состояния, тем самым улучшая процесс взаимодействие пользователя с формой.

В следующем примере мы активируем отключенное ранее поле для ввода name, и подчекнем этот факт выставив прозрачность в 1, и добавив однопиксельную зеленую границу:

CSS:

:enabled {
    opacity: 1;
    border: 1px solid green;
}

Хозяйке на заметку: в разметке не обязательно использовать enabled="enabled". Для активации элемента достаточно просто наличия атрибута enabled. В то же время стандарт XHTML требует полного указания enabled="enabled".

Демо: CSS :enabled псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

:IN-RANGE

Псевдокласс :in-range позволяет выделять элементы, имеющие диапазон допустимых значений, и чьи значения находятся в пределах этого диапазона.

В следующем примере поле для ввода допускает значения в пределах от 5 до 10. Если значение в пределах диапазона, то элемент будет подсвечен зеленой границей.

HTML:

<input type="number" min="5" max="10">

CSS:

input[type=number] {
    border: 5px solid orange;
}

input[type=number]:in-range {
    border: 5px solid green;
}

Демо: CSS :in-range и :out-of-range псевдоклассы от Ricardo Zea(@ricardozea) на CodePen.

:OUT-OF-RANGE

Псевдокласс :out-of-range позволяет выделять элементы, имеющие диапазон допустимых значений, и чьи значения находятся вне этого диапазона.

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

HTML:

<input id="months" name="months" type="number" min="1" max="12">

CSS:

input[type=number]:out-of-range {
    border: 1px solid orange;
}

Демо: CSS :in-range и :out-of-range псевдоклассы от Ricardo Zea(@ricardozea) на CodePen.

:INDETERMINATE

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

Примером может служить ситуация, когда загружается страница с группой переключателей у которой не выбранного по-умолчанию варианта, или если чекбокс получил состояние indeterminate через JavaScript.

HTML:

<ul>
    <li>
        <input type="radio" name="list" id="option1">
        <label for="option1">Option 1</label>
    </li>
    <li>
        <input type="radio" name="list" id="option2">
        <label for="option2">Option 2</label>
    </li>
    <li>
        <input type="radio" name="list" id="option3">
        <label for="option3">Option 3</label>
    </li>
</ul>

CSS:

:indeterminate + label {
    background: orange;
}

Демо: CSS :indeterminate псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

:VALID

Псевдокласс :valid позволяет выбирать элементы чье состояние корректно в соответствии с требованиями формата элемента.

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

CSS:

input[type=email]:valid {
    border: 1px solid green;
}

Демо: CSS :valid и :invalid псевдоклассы от Ricardo Zea(@ricardozea) на CodePen.

:INVALID

Псевдокласс :invalid позволяет выбирать элементы, чье состояние некорректно в соответствии с требованиями формата элемента.

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

CSS:

input[type=email]:invalid {
    border: 1px solid orange;
}

Демо: CSS :valid и :invalid псевдоклассы от Ricardo Zea(@ricardozea) на CodePen.

:OPTIONAL

Псевдокласс :optional позволяет выбирать поля для ввода, заполнение которых не является обязательным в форме. Другими словами, если input-поле не имеет required атрибута, его можно выделить с помощью :optional псевдокласса.

В следующем примере поле необязательно. Оно не имеет required атрибута, и поэтому будет отображаться серым.

HTML:

<input type="number">

CSS:

:optional {
    color: gray;
}

Демо: CSS :valid и :invalid псевдоклассы от Ricardo Zea(@ricardozea) на CodePen.

:READ-ONLY

Псевдокласс :read-only позволяет выбрать элементы, недоступные для изменения пользователем. Подобно псевдоклассу :disabled, атрибут разметки будет определять, какой из псевдоклассов следует использовать.

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

В следующем примере input-поле имеет readonly HTML атрибут, то есть мы можем выбрать его при помощи псевдокласса :read-only, с помощью которого установим цвет текста серым.

HTML:

<input type="text" value="I am read only" readonly>

CSS:

input:read-only {
    color: gray;
}

Демо: CSS :read-only псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

:READ-WRITE

Псевдокласс :read-write позволяет выбрать элементы, которые могут быть изменены пользователем. Элменеты с HTML-атрибутом contenteditable так же доступны для выбора при помощи этого псевдокласса.

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

В следующем примере пользователь сможет редактировать содержимое div-элемента по нажатию мыши. Мы оптимизируем интерфейс, применив определенные стили, которые выделят этот контейнер от остальных, предоставив визуальную подсказку, что содержимое можно редактировать.

HTML:

<div class="editable" contenteditable>
    <h1>Нажмите для редактирования</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
</div>

CSS:

:read-write:focus {
    padding: 5px;
    border: 1px dotted black;
}

Демо: CSS :read-write псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

:REQUIRED

Псевдокласс :rquired позволяет выбрать элементы, содержащие HTML-атрибут required.

В дополнение к традиционным звездочкам (*) у меток input-полей, обязательных для заполнения, мы можем визуально выделять такие элементы при помощи CSS.

В следующем примере input-поле имеет required-атрибут. Мы можем улучшить пользовательский интерфейс применив отдельные стили, предоставляющие визуальную подсказку, что это поле - обязательно к заполнению.

HTML:

<input type="email" required>

CSS:

:required {
    color: black;
    font-weight: bold;
}

Демо: CSS :required псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

:SCOPE (экспериментальный)

Псевдокласс :scope имеет смысл использовать вместе с HTML-атрибутом scoped в style-тэге.

Если style тэг у отдельной части страницы не содержит scoped атрибута, то псевдокласс :scope будет применет ко всему DOM-дерево вплоть до html элемента, который, по-сути, является областьюпо умолчанию для HTML-документа.

В следующем примере, отдельный HTML-блок имеет scoped стиль, поэтому весь текст во втором section-блоке будет выделен курсивом.

HTML и CSS:

<article>
    <section>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet.</p>
    </section>
    <section>
        <style scoped>
            :scope {
                font-style: italic;
            }
        </style>
        <h1>This text will be italicized</h1>
        <p>This text will be italicized.</p>
    </section>
</article>

Демо: CSS :required псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

Языковые псевдоклассы

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

:DIR (экспериментальный)

Псевдокласс :dir позволяет выбрать элементы с специфическим направлением текста. Другими словами, чтобы :dir сработал, необходимо в разметке страницы при помощи HTML-атрибута dir явно указать направление текста в соответствующем элементе.

В настоящее время поддерживаются два варианта: ltr (слева направо) и rtl (справа налево).

На момент написания статьи, только Firefox (селектор с префиксом -moz-dir()) поддерживает :dir псевдокласс. Вероятно, ситуация изменится в ближайшем будущем, поэтому следующие примеры включат в себя оба варианта, с пефиксом и без.

Обратите внимание: объедиение селекторов с префиксом и без в одном правиле не работает, необходимо создавать два отдельных правила.

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

HTML:

<article dir="rtl">
    <p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p>
</article>

CSS:

/* prefixed */
article :-moz-dir(rtl) {
    color: orange;
}

/* unprefixed */
article :dir(rtl) {
    color: orange;
}

Следующий параграф соедржит английский текст (слева направо), будет в соответствии с CSS иметь голубой цвет.

HTML:

<article dir="ltr">
    <p>If you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p>
</article>

CSS:

/* prefixed */
article :-moz-dir(ltr) {
    color: blue;
}

/* unprefixed */
article :dir(ltr) {
    color: blue;
}

Демо: CSS :dir псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

:LANG

Псевдокласс :lang позволяет выбрать элементы с определенным языком, исходя из набора lang="" HTML-атрибута, соответствующего meta элемента и информации из протокола, скажем, HTTP-заголовока.

HTML-атрибут lang="" чаще всего используется в html тэге, но в принципе, может быть использован и в любом другом элементе.

Добавление к текстку кавычек, соответствующих языку, - распространенная практика в типографии. Однако, user agent (UA) большинства браузеров (включая IE9 и выше) могут делать это в автоматическом режиме, если другой вариант не указан в CSS.

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

Например, немецкие (de) кавычки, добавляемые браузером выглядят следующим образом:

„Lorem ipsum dolor sit amet.“

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

»Lorem ipsum dolor sit amet.«

По-идее, оба варианта верны. Поэтому, вам самим решать, использовать ли кавычки добавляемые браузером или же указывать самостоятельно через CSS с использованием :lang псевдокласса и свойства CSS quotes.

Давайте попробуем добавить кавычки при помощи CSS.

HTML:

<article lang="en">
    <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="fr">
    <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="de">
    <q>Lorem ipsum dolor sit amet.</q>
</article>

CSS:

:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }

Демо: CSS :lang псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

Остальные псевдоклассы

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

:ROOT

Псевдокласс :root ссылается на самый дальний родительский элемент в документе.

Практически во всех случаях, псевдокласс :root будет указывать на html элемент HTML-документа. Исключение составлют случаи, когда его использование в другом языке разметки (SVG или XML).

Давайте добавим фоновой цвет к html-элементу, корневому родительскому элементу в HTML-документе.

CSS:

:root {
    background: orange;
}

Точно такого же эффекта мы могли бы добиться используя html в качестве селектора. Однако, :root, являясь классом, имеет более высокую специфичность, чем селектор элемента (в случае с html).

:FULLSCREEN (экспериментальный)

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

Однако, он не предназначен для работы в случаях, когда пользователь нажимает на F11, чтобы перейти в полноэкранный режим в браузере. Он используется вместе с JavaScript Fullscreen API, для изображений, видеороликов и игр, которые выполняются в родительском контейнере.

Самый простой способ определить, когда браузер работает в полноэкранном режиме, это сообщение, которое появляется в верхней части экрана, с предупреждением о том, что браузер работает в полноэкранном режиме и для выхода необходимо нажать Escape. Мы видим это сообщение, когда раскрываем на весь экран видео на YouTube или Vimeo.

Если вы планируете использовать псевдокласс :fullscreen, помните, что по-умолчанию разные браузеры применяют различные стили. Плюс к этому, вам придется использовать специфические префиксы не только в CSS, но и в JavaScript. Я рекомендую использовать библиотеку screenfull.js от Hernan Rajchert, которая учитывает особенности большинства браузеров.

API для полноэкранного режима лежит вне этой статьи, но в качестве примера я приведу сниппет, который будет работеть в WebKit и Blink - браузерах.

HTML:

<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>

CSS:

h1:fullscreen {
    background: orange;
}

Демо: CSS :fullscreen псевдокласс от Ricardo Zea(@ricardozea) на CodePen.

Псевдоэлементы

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

Так же, напомню, что разница между двойным (::) и одинарным (:) двоеточием в данном случае исключительно визуальная, отображающая различие между псевдоэлементами в CSS 2.1 и CSS3.

::BEFORE/:BEFORE

Псевдоэлемент :before, как и его родтсвенник :after, добавляет контекст (текст или фигуру) к другому HTML-элементу. Повторюсь еще раз, этот контент фактически отсутствует в DOM, но с ним можно обращаться таким же образом, как если бы он там присутствовал. И свойство content должно присуствовать в CSS.

Так же, не забывайте, что добавленный таким образом текст нельзя выделить.

HTML:

<h1>Ricardo</h1>

CSS:

h1:before {
    content: "Hello "; /* Обратите внимание на пробел после слова Hello. */
}

На странице это будет отображаться следующим образом:

<h1>Hello Ricardo</h1>

Видие пробел после сова "Hello"? Да, пробелы из content учитываются.

::AFTER/:AFTER

Псевдоэлемент :after добавляет контекст (текст или фигуру) к другому HTML-элементу. Этот контент фактически отсутствует в DOM, но с ним можно обращаться таким же образом, как если бы он там присутствовал. И свойство content должно присуствовать в CSS.

Так же, не забывайте, что добавленный таким образом текст нельзя выделить.

HTML:

<h1>Ricardo</h1>

CSS:

h1:after {
    content: ", Web Designer!";
}

На странице это будет отображаться следующим образом:

<h1>Ricardo, Web Designer!</h1>

Видие пробел после сова "Hello"? Да, пробелы из content учитываются.

::BACKDROP (Экспериментальный)

Псевдоэлемент ::backdrop представляет собой блочный элемент, который генерируется позади полноэкранного элемента, но над всем остальным содержимым страницы. Он используется соместно с псевдоклассом :fullscreen чтобы изменить цвет фона максимизированного экрана.

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

Давайте расширим пример от псевдокласса :fullscreen.

HTML:

<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>

CSS:

h1:fullscreen::backdrop {
    background: orange;
}

Демо: CSS ::backdrop псевдоэлемент от Ricardo Zea(@ricardozea) на CodePen.

::FIRST-LETTER/:FIRST-LETTER

Псевдоэлемент :first-letter позволяет выбрать первую букву в строке текста.

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

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

Хозяйке на заметку: используя этот псевдоэлемент можно изменить первую букву даже в псевдоэлементе :before, не смотря на то, что он отсутствует в DOM.

CSS:

h1:first-letter  {
    font-size: 5em;
}

::FIRST-LINE/:FIRST-LINE

Псевдоэлемент :first-line позволяет выбрать первую строку в элементе. Он работает только с блочными элементами.

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

CSS:

p:first-line  {
  background: orange;
}

::SELECTION

Псевдоэлемент :selection позволяет изменить стиль выделенной части документа.

Браузер Gecko-типа требуют указания версии селектора с прификсом ::-moz-selection.

Обратите внимание, что объединение селектора с префиксом и без в одном правиле не сработает. Необходимо создавать два отдельных правила.

CSS:

::-moz-selection {
    color: orange;
    background: #333;
}

::selection  {
    color: orange;
    background: #333;
}

::PLACEHOLDER (Экспериментальный)

Псевдоэлемент ::placeholder позволяет выбрать текст, использованный в форме в качестве атрибута placeholder.

Он так же может быть написан как ::input-placeholder.

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

В некоторых браузерах (IE10 и Firefox до 18 версии) ::placeholder реализован как псевдокласс. Все остальные браузеры обращаюится с ним как с псевдоэлементом. Так что, если вам не нужно поддерживать старые версии Firefox или IE10, то можно использовать следующую разметку:

HTML:

<input type="email" placeholder="name@domain.com">

CSS:

input::-moz-placeholder {
    color:#666;
}

input::-webkit-input-placeholder {
    color:#666;
}

/* только для IE 10 */
input:-ms-input-placeholder {
    color:#666;
}

/* Firefox 18 и ранее */
input:-moz-input-placeholder {
    color:#666;
}

Заключение

Фух, это было что-то, не так ли?

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

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

Оригинал статьи на английском