Исчерпывающее руководство по псевдоэлементам и псевдоклассам в CSS
Hola a todos! Всем привет! Будучи молодым веб-дизайнером я был вынужден учиться методом проб и ошибок. Тогда не было Smashing Magazine, Can I Use, CodePen или каких-то других замечательнх штук, доступных нам сегодня. Найти кого-то, кто мог бы показать фишки веба, особенно что касалось CSS, было невероятно полезно.
Теперь я немного оброс жирком опыта. И сегодня поделюсь с вами в очень дружелюбной, непринужденной и ненавязчивой манере всем, что касается псевдоклассов (ПК) и всевдоэлементов (ПЭ).
Если вы опытный веб-дизайнер или разработчик, то вы наверняка знаете и используете большую часть ПК и ПЭ, описанных в статье. Тем не менее, вы можете пробежаться по списку. Наверняка найдутся один или два пункта, о которых вы раньше не знали.
Перед тем как перейти к сути, и потому что это непосредственно относится к ПК и ПЭ, давайте начнем с основ: вы когда-нибудь задумывались что значит “псевдо”? Если так, то вот определение с Dictionary.com:
имя прилагательное
1. то, что подразумевается, но не имеется на самом деле; делать вид; ложный или поддельный; фиктивный.
2. почти, приближенное, или пытающееся быть.
Статья с определением на русском языке (примечание переводчика)
Не вдаваясь в технические подробности определения, данного консорциумом W3C, в основе псевдокласса лежит фантомное состояние элемента или его специфичная характеристика, управляемая через CSS. Несколько распространенных примеров псевдоклассов :link, :hover, :active, :first-child и :nth-child. На самом деле их гораздо больше и мы рассмотрим их чуть позже.
Кроме того ПК всегда начинаются с двоеточия (:). Затем идет имя ПК и иногда значение в скобках. Знакомы с :nth-child?
Перейдем к псевдоэлементам. Они являются виртуальными элементами, которыми мы можем манипулировать как обычными html-элементами. Разница в том, что ПЭ не существуют в дереве документа или DOM. Это значит что мы не пишем ПЭ в html-разметке, а создаем их при помощи CSS.
Примеры ПЭ :after, :before и :first-letter. Мы вспомним о них ближе к концу этой статьи.
Одинарное или двойное двоеточие для ПЭ?
Короткий ответ — в большинстве случаев подойдут оба написания.
Двойное двоеточие (::) было представлено в CSS3 для дифференциации таких псевдоэлементов, как ::before и ::after от псевдоклассов, например :hover и :active. Двойное двоеточие поддерживают большинство браузеров, включая Internet Explorer (IE) 8 и ниже.
Хотя некоторые ПЭ, такие как ::backdrop, требуют только двойного двоеточия.
Лично я использую одинарное двоеточие, это делает мой CSS-код обратно совместимым со старыми браузерами. Конечно же я использую написание с двойным двоеточием для тех ПЭ, которые этого требуют.
Вы в праве использовать оба варианта. В этом вопросе действительно нет однозначно правильного или неправильного ответа.
Тем не менее спецификация на момент написания этой статьи рекомендует использовать именно одиночное двоеточие по упомянутой выше причине обратной совместимости:
Пожалуйста, обратите внимание что в CSS3 новый способ написания ПЭ предусматривает двойное двоеточие, например a::after {…}, для визуального отделения от ПК. Вы могли видеть такое написание в CSS. CSS3 тем не менее все еще поддерживает одиночное двоеточие ради обратной совместимости. И мы рекомендуем вам придерживаться подобного написания еще какое-то время.
В тексте этой статьи ПЭ, которые поддерживают как одинарное, так и двойное двоеточие будут показаны в обоих вариантах; ПЭ, требующие только двойного двоеточия, будут показаны как есть.
Когда (не) использовать CSS сгенерированное содержимое
Создание контента с помощью CSS достигается путем объединения свойства content и ПЭ :before или :after.
Этот “контент” может быть простым текстом или контейнером, которыми мы можем манипулировать при помощи CSS для отображения графических форм или декоративных элементов. Дальше я буду говорить о первом типе такого контента — тексте.
Сгенерированный контент не должен использоваться для важной информации или текста по следующим причинам:
- Он не будет доступен для большинства программ чтения с экрана.
- Его нельзя будет выделить.
- Если контент содержит избыточную декоративную информацию, программы чтения с экрана, которые поддерживают CSS content, будут читать его вслух. Это будет убийственно для UX.
Используйте сгенерированный контент в декоративных целях или для не особо важной информации. Но убедитесь что он правильно распознается программами чтения с экрана. Перед использованием этого инструмента “думайте прогрессивно”.
На Smashing Magazine есть великолепная статья об использовании сгенерированного контента CSS.
Экспериментальные псевдоклассы и псевдоэлементы
ПК или ПЭ считаются экспериментальными пока их спецификация не стабильна или не является финальной. Синтаксис и поведение могут изменится по ходу пьесы.
Тем не менее мы можем использовать экспериментальные ПК и ПЭ уже сейчас при помощи вендорных префиксов. Чтобы это сделать обратитесь к Can I Use и уточните, для каких ПК и ПЭ префиксы необходимы. А затем воспользуйтесь одним из инструментов автоматической установки префиксов, например -prefix-free или Autoprefixer.
В этой статье вы увидите пометку “экспериментальный” рядом с такими ПК или именами ПЭ.
Псевдоклассы
Мы начнем обсуждение с псевдоклассов, имеющих отношение к определенным состояниям.
Состояния
ПК состояний обычно вступают в игру, когда пользователь выполняет определенное действие. “Действие” в CSS может так же означать “отсутствие действия”, например в случае со ссылками, по которым еще не было переходов.
Давайте рассмотрим их по порядку.
:link
:link это ПК, отвечающий за “нормальное” состояние ссылки и используется для выбора ссылок, которые еще не были посещены. Объявление :link перед всеми остальными ПК крайне желательно. Порядок всех четырех следующий :link, :visited, :hover, :active.
a:link {
color: orange;
}Его так же можно опустить и писать так:
a {
color: orange;
}:visited
:visited используется для стилей ссылок, по которым был переход. Позиция ПК :visited вторая по счету (после :link).
a:visited {
color: blue;
}:hover
:hover используется для стилизации элементов, когда курсор пользователя находится над ними. Сфера использования этого ПК не ограничивается ссылками, хотя именно для них чаще всего применяется.
Этот ПК должен идти третьим в списке (после :visited).
a:hover {
color: orange;
}Demo:
:active
ПК :active используется для элементов, которые были “активированы” при помощи курсора или касанием для сенсорных устройств. Так же может сработать от нажатия клавиш на клавиатуре, так же как и :focus.
Работа этого ПК очень похожа на :focus, разница в том, что :active — событие, происходящее между моментом когда клавиша мыши была нажата и до момента, когда она была отпущена.
Этот ПК должен идти четвертым (после :hover).
a:active {
color: rebeccapurple;
}:focus
ПК :focus используется для стилизации элементов, которые получили фокус при помощи курсора, тапа на тачскрине или при помощи клавиатуры. Часто используется для элементов формы.
a:focus {
color: green;
}Или:
input:focus {
background: #eee;
}Бонус: SASS миксины для ссылок
Если вы работаете с препроцессорами CSS, такими как SASS, этот бонус будет вам интересен.
Для оптимизации работы вы можете использовать миксины SASS для создания базового набора ссылок.
Идея, скрывающаяся за данными миксинами, в том, что состояния не объявлены по умолчанию. Поэтому мы “вынуждены” в дружественной форме объявить все четыре состояния ссылок.
: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;
}Demo:
Структура
Структурные псевдоклассы нацелены на создание дополнительной информации в дереве документа или DOM и не могут быть представлены другими типами комбинаторов или селекторов.
:first-child
:first-child представляет первого ребенка родительского блока.
В примере ниже только первый элемент li будет с текстом оранжевого цвета.
HTML:
<ul>
<li>This text will be orange.</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>This text will be orange.</li>
<li>Lorem ipsum dolor sit amet. <span>This text will be orange.</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>This text will be orange.</li>
</ul>CSS:
li:last-child {
color: orange;
}:last-of-type
:last-of-type выбирает последний элемент указанного типа в родительском контейнере.
В примере оранжевый текст будет только у последних элементов li и span.
HTML:
<ul>
<li>Lorem ipsum dolor sit amet. <span>Lorem ipsum dolor sit amet.</span> <span>This text will be orange.</span></li>
<li>Lorem ipsum dolor sit amet.</li>
<li>This text will be orange.</li>
</ul>CSS:
ul :last-of-type {
color: orange;
}:not
ПК :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;
}Demo:
:nth-child
ПК :nth-child выбирает один или более элементов в зависимости от их позиции в разметке.
Этот ПК является одним из самых универсальных и мощных вCSS.
Все :nth ПК принимают аргументы, которые представлены формулой в круглых скобках. Формула может быть одним числом, формулой со структурой an+b или словами odd(нечетный)/even(четный).
В формулах типа an+b:
- a является числом (именуется целым числом);
- n это буква n (другими словами мы действительно пишем букву n в формуле);
- + это оператор который может быть как плюсом (+) так и минусом (-);
- b представляет собой целое число, как правило, но используется только там где необходим.
Используем греческий алфавит. Ниже есть несколько примеров, использующих одну HTML структуру:
<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;
}Demo:
: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-last-child(2n+6) {
color: orange;
}:nth-of-type
:nth-of-type в целом работает так же как :nth-child, главным отличием является то, что он более специфичный поскольку мы обращаемся к определенному элементу и его отношениям к другим элементам, вложенным в родительский блок.
В следующем примере все вторые параграфы в любых родительских контейнерах будут оранжевыми:
HTML:
<article>
<h1>Heading Goes Here</h1>
<p>Lorem ipsum dolor sit amet.</p>
<a href=""><img src="images/rwd.png" alt="Mastering RWD"></a>
<p>This text will be orange.</p>
</article>CSS:
p:nth-of-type(2) {
color: orange;
}:nth-last-of-type
:nth-last-of-type работает так же как :nth-of-type, разница в том, что отсчет начинается с конца.
Пример ниже мы начинаем отсчет снизу и все первые параграфы поменяют цвет текста на оранжевый:
HTML:
</article>
</h1>Heading Goes Here</article>/h1>
</p>This text will be orange.</p>
</a href="#"><img src="images/rwd.png" alt="Mastering RWD"></a>
</p>Lorem ipsum dolor sit amet.</p>
</article>CSS:
p:nth-last-of-type(2) {
color: orange;
}Ресурсы
Обратитесь к этим двум ресурсам при работе с :nth ПК:
- “CSS3 Structural Pseudo-Class Selector Tester,” Lea Verou
- “:nth Tester,” CSS-Tricks
:only-child
ПК :only-child выбирает единственный дочерний элемент в родителе.
В примере первый элемент ul имеет единственного ребенка, которому будет назначен оранжевый цвет текста. Второй элемент ul содержит несколько детей. Таким образом на них не повлияет правило ПК :only-child.
HTML:
<ul>
<li>This text will be orange.</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>This text will be orange.</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 элемента и помещает его в URL.
Пример: статья с уникальным ID будет иметь желтый фон если 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: вместо background-color: — результат будет одинаковым.
Валидация
Формы всегда были бичом веб-дизайна и разработки. При помощи ПК валидации мы можем сделать процесс заполнения формы более “гладким” и приятным в плане опыта пользователя.
Однако следует отметить, что хотя большинство ПК, перечисленных в этом разделе хороши для работы с элементами формы, некоторые из них могут использоваться так же и другими html-элементами.
Давайте проверим на деле!
:checked
ПК :checked управляет радио-кнопками, чекбоксами и элементами option, которые были выбраны.
Пример: когда чекбокс “активирован” (выбран) подпись становится выделенной, улучшая тем самым удобство использования.
Demo:
:default
ПК :default нацелен на элемент по умолчанию в форме среди группы сходных элементов.
В случае, если вам нужно назначить кнопку по умолчанию в форме, но элемент не имеет класса, то вы можете воспользоваться псевдоклассом :default.
Обратите внимание, что кнопки “Reset” или “Clear” в формах сопровождаются серьезными проблемами с юзабилити. Используйте их только там, где без этого совершенно невозможно обойтись. В следующих статьях этот вопрос освещен более подробно:
- “Reset and Cancel Buttons,” Nielsen Norman Group (2000)
- “Killing the Cancel Button on Forms for Good,” UX Movement (2010)
Demo:
:disabled
:disabled работает с элементами форм в их отключенном состоянии. “Задизейбленный” (отключенный) элемент не может быть выбран, с ним нельзя взаимодействовать или активировать его, он не может получить фокус.
Пример: поле ввода имени отключено, поэтому оно отображается прозрачным на 50%.
HTML:
<input type="text" id="name" disabled>CSS:
:disabled {
opacity: 0.5;
}Совет: Использовать disabled=”disabled” в разметке не требуется. Вы получите тот же результат используя только логический атрибут dasabled. Однако стоит помнить, что использование disabled=”disabled” обязательно в XHTML.
Demo:
: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;
}
Demo:
:enabled
:enabled выбирает включенные (активные для взаимодействия) элементы. Все элементы формы активны по умолчанию — утверждение верно до тех пор, пока мы не используем disabled атрибут в разметке.
Мы можем использовать комбинацию :enabled и :disabled для обеспечения визуальной обратной связи, тем самым улучшив UX.
Пример: поле ввода имени было выключено, но затем мы его активируем. У него появится зеленая обводка в 1px и его видимость (opacity) изменится на 1:
:enabled {
opacity: 1;
border: 1px solid green;
}Совет: Использовать enabled=”enabled” в разметке не обязательно. Тот же результат достигается при помощи логического атрибута enabled у html-элемента. Однако помните, что enabled=”enabled” необходимо в XHTML.
Demo:
: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;
}
Demo:
: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;
}Demo:
: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;
}Demo:
:valid
ПК :valid нацелен на элемент формы, который заполнен в соответствии с форматированием этого элемента.
Пример: поле ввода электронной почты заполнено в соответствии с установленным форматированием. Таким образом поле будет считаться валидным и будет отображаться с зеленой рамкой в 1px:
input[type=email]:valid {
border: 1px solid green;
}Demo:
:invalid
ПК :invalid работает с элементами формы, чье форматирование не совпадает с требуемым.
Пример: когда в поле ввода электронной почты введены данные, не совпадающие с требуемым форматирование, значение будет считаться невалидным и у поля появится оранжевая обводка:
input[type=email]:invalid {
background: orange;
}Demo:
:optional
:optional предназначен для полей ввода, которые не являются обязательными. Другими словами до тех пор, пока поле не имеет атрибута required, оно будет подчиняться ПК :optional.
Пример: поле является опциональным (необязательным). У него нет атрибута required, поэтому текст будет серым.
HTML:
<input type="number">CSS:
:optional {
color: gray;
}:read-only
ПК :read-only нацелен на нередактируемый элемент. Поведение похоже на :disabled. Наличие атрибута в разметке поможет решить, какой из псевдоклассов следует использовать.
Он будет полезен, например, в формах, где нам нужно показать предварительно заполненную информацию, которая не может быть изменена. Но она необходима для отображения в элементе формы в качестве примера.
Пример: у элемента формы в html указан атрибут readonly. Поэтому для него сработают правила псевдокласса :read-only и текст будет серым.
HTML:
<input type="text" value="I am read only" readonly>CSS:
input:read-only {
color: gray;
}Demo:
:read-write
:read-write ПК выбирает элементы, которые могут быть отредактированы пользователем. Сработает так же как если бы у элемента был атрибут contenteditable в html.
Этот псевдокласс можно сочетать с :focus для улучшения UX в определенных ситуациях.
Пример: пользователю нужно кликнуть на div, чтобы отредактировать его содержимое. Мы можем улучшить опыт взаимодействия, применив особые стилевые правила, выделяющие этот кусок контента на фоне других. Тем самым обеспечим визуальную подсказку для пользователя, что содержимое редактируемо.
HTML:
<div class="editable" contenteditable>
<h1>Click on this text to edit it</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
</div>CSS:
:read-write:focus {
padding: 5px;
border: 1px dotted black;
}Demo:
:required
:required работает с элементами, которые имеют атрибут required в html-разметке.
В дополнение к обычной “звездочке” (астериску — *) возле подписи к полю ввода, показывающей обязательность его заполнения, мы можем визуально выделить поле при помощи CSS. Фактически мы получаем лучшее из двух миров.
Пример: у поля есть атрибут required. Улучшаем UX, применяя определенный стиль, который дает сигнал, что поле обязательное.
HTML:
<input type="email" required>CSS:
:required {
color: black;
font-weight: bold;
}Demo:
:scope (эксперимент)
Псевдокласс :scope имеет наибольший смысл, когда он связан с html-атрибутом scoped у тега style.
Если атрибута scoped нет у тега style внутри страницы, то :scope будет применен к элементу html, который является дефолтным (по умолчанию) в таблице стилей.
Пример: html-блок имеет таблицу стилей с атрибутом scoped и поэтому весь текст внутри второго блока будет написан курсивом.
HTML and 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>Demo:
Язык
Языковые псевдоклассы связаны с текстом, содержащимся на странице. Они не управляют никакими медиа-элементами, такими как изображения или видео.
: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;
}
Параграф ниже написан на английском (слева направо). Текст будет синим.
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;
}
Demo:
:lang
ПК :lang соответствует языку элемента, который определен комбинацией атрибута lang=””, определенного meta элемента и информации из заголовка полученного по протоколу HTTP.
Html-атрибут lang=”” обычно используется в теге html, но так же может быть и у другого тега, если это необходимо.
В сопроводительном примечании написано, что считается хорошим тоном указывать в CSS-свойстве quotes какие кавычки должны быть установлены в документе. Тем не менее большинство браузеров (включая IE9 и выше) способны добавлять правильные кавычки автоматически, если они не объявлены явно в CSS.
В разных ситуациях этот механизм может срабатывать правильно или неправильно. Поскольку есть различия между кавычками, которые ставятся автоматически при помощи внутренних механизмов браузера. Предпочтительно использование правила для кавычек в CSS.
Пример: кавычки в немецком (de), установленные браузером, выглядят следующим образом:
„Lorem ipsum dolor sit amet.“
Тем не менее в большинстве примеров, найденых в сети, кавычки установлены при помощи CSS и выглядят так (что соответствует правильному варианту в немецком языке):
»Lorem ipsum dolor sit amet.«
Оба варианта фактически верны. Поэтому вы должны решить для себя позволить ли браузеру автоматически ставить кавычки или добавить их самостоятельно при помощи псевдоэлемента :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: '»' '«'; }Demo:
Прочее
Давайте рассмотрим псевдоклассы с другими функциями.
:root
:root ПК относится к самому высокому родительскому элементу в документе.
Практически во всех случаях :root будет относится к элементу html в документе. Однако он может обратится и к другому элементу, если он используется в другом языке разметки, например SVG или XML.
Давайте добавим сплошной фон для элемента html, самого высокого родительского элемента в документе:
:root {
background: orange;
}Заметка: Мы можем добиться того же эффекта, если используем html в качестве селектора. Однако :root как класс имеет более высокую специфичность по сравнению с селектором (в данном случае html).
:fullscreen (эксперимент)
ПК :fullscreen выбирает элементы, которые отображаются в полноэкранном режиме.
Как не странно, он не предназначен для сценария, когда пользователь нажимает клавишу F11 для входа в полноэкранный режим браузера. Скорее всего он предназначен для работы с JavaScript Fullscreen API, который ориентирован на изображения, видео и игры, исполняемые в родительском контейнере.
Кстати говоря, вход в полноэкранный режим сопровождается сообщением в верхней части экрана, в котором говорится, что при нажатии клавиши Escape вы вернетесь в стандартный режим. Мы увидим сообщение если раскроем на весь экран видео на YouTube, например.
Если вы собираетесь использовать ПК :fullscreen, то помните, что браузеры стилизуют этим элементы очень по-разному. Кроме того, вы будете иметь дело с вендорными префиксами не только в CSS, но и в JavaScript. Я рекомендую использовать библиотеку screenfull.js от Hernan Rajchert, которая сглаживает большинство причуд браузеров.
Fullscreen 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;
}Demo:
Псевдоэлементы
Как уже упоминалось в начале этой статьи, псевдоэлементы — это виртуальные, которыми мы можем управлять как обычными html-элементами. Они не существуют в дереве документа или DOM, что означает, что мы создаем их через CSS и помещаем в HTML.
Кроме того, двойное двоеточие (::) и одно двоеточие (:) является лишь визуальным различием псевдоэлементов CSS 2.1 и CSS3. Вы можете использовать оба варианта написания.
::before/:before
Псевдоэлемент :before добавляет контент (текст или блок) перед другим html-элементом. И опять же, этот контент по факту не существует в DOM, но мы можем им управлять будто он есть. Обязательно должно быть объявлено CSS-свойство content.
Помните, что текст, добавленный через псевдоэлемент, не может быть выбран пользователем.
HTML:
<h1>Ricardo</h1>CSS:
h1:before {
content: "Hello "; /* Note the space after the word Hello. */
}Итог будет таким:
Hello Ricardo!Заметка: Видите пробел после слова “Hello ”? Да, пробелы тоже учитываются.
::after/:after
ПЭ :after используется для добавления контента (текста или блока) после другого html-элемента. И опять же, этот контент по факту не существует в DOM, но мы можем им управлять будто он есть. Обязательно должно быть объявлено CSS-свойство content.
Помните, что текст, добавленный через псевдоэлемент, не может быть выбран пользователем.
HTML:
<h1>Ricardo</h1>CSS:
h1:after {
content: ", Web Designer!";
}Итог будет следующим:
Ricardo, Web Designer!::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;
}Demo:
::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 в html.
Запись в CSS так же может выглядеть как ::input-placeholder.
Заметка: Этот ПЭ не является частью стандарта, но весьма вероятно что это изменится в будущем. Используйте его с осторожностью.
В некоторых браузерах (IE 10 и 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 only */
input:-ms-input-placeholder {
color:#666;
}/* Firefox 18 and below */
input:-moz-input-placeholder {
color:#666;
}
Заключение
Уф! Это было что-то, правда?
CSS псевдоклассы и псевдоэлементы бывают действительно полезны, верно? Они предоставляют так много возможностей, которые могут сперва ошеломить, я уверен. Но это жизнь веб-дизайнера и разработчика.
Основательно протестируйте работу каждого из пунктов. Путь до хорошо реализованных ПК и ПЭ будет долгим.
Я надеюсь, что вы будете пользоваться этой обширной справочной статьей хотя бы столько же времени, сколько я потратил на ее написание. И не забудьте добавить ее в закладки!
Спасибо за ваше внимание! До новых встреч! Hasta la próxima!
Перевод статьи An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements By Ricardo Zea
