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

CSS псевдоэлемент before

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

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

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

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

В

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

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

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

селектор:псевдокласс {  /* одинарное двоеточие */
CSS свойство: значение;
}

Фокус на элементе

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

Давайте рассмотрим пример использования псевдокласса:


charset = "UTF-8">
	Псевдокласс :focus

В данном примере мы создали два элемента , первый с типом text (однострочное текстовое поле), а второй с типом password (поле с паролем).

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

Результат нашего примера:


Рис. 17 Пример использования псевдоэлемента :focus.

Стилизация ссылок

link

Псевдокласс :link задаёт стиль всем ссылкам, по которым пользователь не произвёл переход (не посещенные ссылки). Как правило, используется с псевдоклассом :visited, который определяет стиль для посещённых пользователем ссылок.



charset = "UTF-8">
	Псевдокласс :link

Не посещённые ссылки:

href = «https://ru.wikipedia.org/wiki/Квантовая_механика»>Квантовая_механика
href = «https://ru.wikipedia.org/wiki/Начертательная_геометрия»>Начертательная_геометрия

В этом примере с использованием псевдокласса :link мы указали, что ссылки (элементы ) по которым пользователь не переходил подсвечиваются оранжевым цветом:


Рис. 17а Пример использования псевдокласса :link.

visited

Псевдокласс :visited задаёт стиль всем ссылкам, по которым пользователь производил переход (посещенные ссылки).



charset = "UTF-8">
	Псевдокласс :visited

Cсылки, которые Вы уже посещали:

href = «https://ru.wikipedia.org/wiki/Квантовая_механика»> Квантовая_механика
href = «https://ru.wikipedia.org/wiki/Начертательная_геометрия»> Начертательная_геометрия

В этом примере с использованием псевдокласса :visited мы указали, что ссылки (элементы ) по которым пользователь производил переход имеют красный цвет:


Рис. 17б Пример использования псевдокласса :visited.

active

Псевдокласс :active используется для выбора активного элемента — элемента на который в данный момент пользователь кликнул мышкой. Стиль для элемента применится и будет работать пока удерживается кнопка мыши.



charset = "UTF-8">
	Псевдокласс :active

class = «test»>Заголовок третьего уровня с классом test

class = «test»>Абзац с классом test

class = «test» href = «#»>Ссылка с классом test

Выберите любой элемент и удерживайте на нём кнопку мыши:

Заголовок третьего уровня с классом test

Абзац с классом test

hover

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



charset = "UTF-8">
	Псевдокласс :hover
Наименование

Модель

Цена

		Кирпич

100

$15

		Лабутены

krasnie

$1500

		Штаны

voshititelnie

$200

		Шапка

ushanka

$200

		

В этом примере с использованием псевдокласса :hover мы подсвечиваем строку на которую в настоящее время наведен курсор:

Обращаю Ваше внимание, что если вы используете псевдоклассы :link и :visited, то псевдокласс :hover должен быть расположен после них. Результат нашего примера:

Результат нашего примера:


Рис. 17в Пример использования псевдокласса :hover.

В этом примере были использованы относительные единицы измерения — процентные значения. Подробно о использовании различных единиц измерения в CSS будет рассмотрено в статье учебника «Единицы измерения CSS, размер шрифта».

Псевдоэлементы для псевдоклассов

Почему-то некоторые до сих пор этому удивляются. Но раз псевдокласс выбирает элемент — почему бы этому элементу не обзавестись еще и псевдоэлементом?

Простейший случай, пожалуй — особое оформление для первого/последнего элементов в ряду. Например, дорисовать стрелки для крайних пунктов подобного меню. А заодно и перекрасить эти стрелки при наведении: псевдокласс для этого взят уже другой (), но элементы-то выбираются те же самые (ссылки, в т.ч. крайние), а значит, мы фактически перекрашиваем те же самые псевдоэлементы. Что и требовалось.

Ситуаций, где псевдоэлемент нужен только при определенном динамическом состоянии, немало. Давний пример — подсветка столбцов таблицы при наведении. Или всевозможные «выкрутасы» при валидации форм. Например, вариант, когда форма не отвлекает пользователя во время добавления, но «поздравляет» его, когда всё заполнено корректно (пример). Кстати, присмотритесь к этому примеру повнимательнее:  и  могут быть не только с краю! Увы, этот пример не работает в IE (он не понимает ).

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

Псевдоэлемент Пример Описание Chrome Firefox Opera Safari IExplorer Edge
:active a:active Применяет стиль к активной ссылке. 4.0 2.0 9.6 3.1 7.0 12.0
:checked input:checked Применяется к элементам (выбранные элементы type = «radio» или type = «checkbox») 4.0 3.5 9.6 3.2 9.0 12.0
:disabled input:disabled Выбирает каждый отключенный элемент . 4.0 3.5 9.6 3.2 9.0 12.0
:empty div:empty Выбирает каждый элемент , который не содержит дочерних элементов (включая текст/ пробелы). 4.0 3.5 9.6 3.2 9.0 12.0
:enabled input:enabled Применяется для выбора каждого элемента , который не отключен. 4.0 3.5 9.6 3.2 9.0 12.0
:first-child h2:first-child Выбирает любой тег , который является первым дочерним тегом своего родителя. 4.0 3.0 9.6 3.1 7.0 12.0
:first-of-type p:first-of-type Выбор каждого элемента , который является первым из элементов своего родительского элемента. 4.0 3.5 9.6 3.2 9.0 12.0
:focus input:focus Стилизует элемент , который находится в фокусе. 4.0 2.0 9.6 3.1 8.0 12.0
:hover a:hover Стилизует ссылку (элемент ) при наведении указателя мыши. 4.0 2.0 9.6 3.1 7.0 12.0
:in-range input:in-range Выбирает все элементы со значением в указанном диапазоне. 10.0 28.0 11.0 5.2 Нет 13.0
:invalid input:invalid Выбирает все элементы в которых значение указано некорректно (не соответствует типу входных данных). 10.0 4.0 10.0 5.0 10.0 12.0
:lang(код языка) p:lang(es) Выбирает каждый элемент , атрибут lang которого, содержит значение «es» (Español) 4.0 2.0 9.6 3.1 8.0 12.0
:last-child h2:last-child Выбирает любой тег , который является последним дочерним элементом своего родителя. 4.0 3.5 9.6 3.2 9.0 12.0
:last-of-type p:last-of-type Выбор каждого элемента , который является последним из элементов своего родительского элемента. 4.0 3.5 9.6 3.2 9.0 12.0
:link a:link Задаёт стиль всем ссылкам, по которым пользователь не произвёл переход (не посещенные ссылки). 4.0 2.0 9.6 3.1 7.0 12.0
:not(селектор) :not(h2) Задаёт стиль всем элементам, которые не являются элементом 4.0 3.5 9.6 3.2 9.0 12.0
:nth-child(n) tr:nth-child(2) Выбирает каждый элемент
4.0 3.5 9.6 3.2 9.0 12.0
:nth-last-child(n) p:nth-last-child(2) Выбирает каждый элемент , который является вторым дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). 4.0 3.5 9.6 3.2 9.0 12.0
:nth-last-of-type(n) p:nth-last-of-type(2) Выбирает каждый элемент , который является вторым дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). 4.0 3.5 9.6 3.2 9.0 12.0
:nth-of-type(n) img:nth-of-type(2) Выбор каждого элемента , который является вторым дочерним элементом своего родительского элемента. 4.0 3.5 9.6 3.2 9.0 12.0
:only-child p:only-child Выбор каждого элемента , который является единственным дочерним элементом своего родительского элемента (нет других элементов). 4.0 3.5 9.6 3.2 9.0 12.0
:only-of-type p:only-of-type Выбор каждого элемента , который является единственным элементом своего родительского элемента (нет других элементов ). 4.0 3.5 9.6 3.2 9.0 12.0
:optional input:optional Выбирает все элементы , у которых не задан атрибут required (который указывает, что пользователь обязательно должен выбрать/добавить значение перед отправкой формы). 10.0 4.0 10.0 5.0 10.0 12.0
:out-of-range input:out-of-range Выбирает все элементы , которые находятся за пределами указанного диапазона (атрибуты min и max). 10.0 28.0 11.0 5.2 Нет 13.0
:read-only input:read-only Выбирает все элементы для которых указан атрибут readonly (только для чтения). Да -moz- Да Да Нет 13.0
:read-write input:read-write Выбирает все элементы для которых не указан атрибут readonly (только для чтения). Да -moz- Да Да Нет 13.0
:required input:required Выбирает все элементы , у которых задан атрибут required (который указывает, что пользователь обязательно должен выбрать/добавить значение перед отправкой формы). 10.0 4.0 10.0 5.0 10.0 12.0
:root :root Определяет корневой элемент документа. 4.0 3.5 9.6 3.2 9.0 12.0
:target :target Стилизует целевой элемент на странице (на который был произведён переход по якорной ссылке). 4.0 3.5 9.6 3.2 9.0 12.0
:valid input:valid Выбирает все элементы в которых значение указано корректно (соответствует типу входных данных). 10.0 4.0 10.0 5.0 10.0 12.0
:visited a:visited Задаёт стиль всем ссылкам, по которым пользователь произвёл переход (посещенные ссылки). 4.0 2.0 9.6 3.1 7.0 12.0

Псевдокласс hover.

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

Ну а раз уж догадались просто покажу пример:

Псевдоклассы.menu {display: block;width: 180px; background-color:#fff8dc;color:#008; font-size: 16px; text-decoration: none;padding: 3px;}.menu:hover {display: block;width: 180px; background-color:#b8860b;color:#fff;padding: 3px;font-size: 16px;text-decoration: none;}tr:hover {background-color:#b8860b;}

Чем Вам не блок навигации по сайту?

А вот ещё один распространенный трюк.. строки в таблице подсвечиваются при наведении на них курсором.

Иванов
+
 
 
+
 
 

Петров
 
+
 
 
+
 

Сидоров
 
 
+
 
 
+

смотреть пример  

Несколько слов к примеру выше..

Как Вы наверное заметили в качестве селектора псевдокласса может выступать не только какой либо элемент — тег, но и или . Так в примере к классу .menu применён псевдокласс hover и синтаксис приобретает следующий вид:

.menu:hover { color:#ff0000;}

Не запутались в терминологии?

Простыми словами мы сказали браузеру что мол подсвечивай красным только те ссылки которые находится в навигационном блоке (выведены в класс.menu ), а остальное оставь как есть!

:fullscreen (эксперимент)

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

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

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

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

Fullscreen API выходит за рамки данной статьи, но вот фрагмент кода, который будет работать в браузерах на основе WebKit и Blink.

HTML:

input[type=range]

Gecko

Начиная с Firefox 22, Gecko предлагает псевдоэлементы ::-moz-range-track и ::-moz-range-thumb для стилизации input’ов-ползунков. К этим элементам можно применить большинство CSS-правил. Например:

::-moz-range-track {
    border: 2px solid red;
    height: 20px;
    background: orange;
}
::-moz-range-thumb {
    background: blue;
    height: 30px;
}

Вот как это выглядит в браузере Firefox 22 и на OС X:

Trident

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

  • ::-ms-fill-lower: часть полоски, по которой ездит ползунок, под/перед самим ползунком.
  • ::-ms-fill-upper: Часть полоски, по которой ездит ползунок, над/после самого ползунка.
  • ::-ms-ticks-before: Область над/перед полоской ползунка с делениями.
  • ::-ms-ticks-after: Область под/после полоски ползунка с делениями.
  • ::-ms-thumb: Сам ползунок
  • ::-ms-track: Полоска ползунка
  • ::ms-tooltip: Всплывающая подсказка, которая появляется во время того, как пользователь выбирает значение в селекторе ползунка. Заметьте, что этот элемент не может быть стилизован, а только скрыт при помощи display: none. 🙂

Легче изобразить это на примере. Держите:

::-ms-fill-lower { background: orange; }
::-ms-fill-upper { background: green; }
::-ms-thumb { background: red; }
::-ms-ticks-after { display: block; color: blue; }
::-ms-ticks-before { display: block; color: black; }
::-ms-track { padding: 20px 0; }
::-ms-tooltip { display: none; /* только показать и скрыть */ }

Именно так это будет выглядеть в браузере IE10 в Windows 8:

WebKit

WebKit предоставляет псевдоэлемент the ::-webkit-slider-runnable-track для полоски и ::-webkit-slider-thumb для самого ползунка. Хотя с ним и мало что можно сделать, но вы можете добавить цвета и отступы:

::-webkit-slider-runnable-track {
    border: 2px solid red;
    background: green;
    padding: 2em 0;
}
::-webkit-slider-thumb {
    outline: 2px solid blue;
}

Вот так это выглядит в Chrome 26 на ОС Х:

И последнее замечание об input’ах-ползунках. Trident и Webkit позволяют менять вид самого ползунка при наведении с помощью псевдоэлементов (::-webkit-slider-thumb:hover и ::-ms-thumb:hover соответственно). Gecko в настоящий момент не может похвастаться такой возможностью.

:nth-child

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

Этот ПК является одним из самых универсальных и мощных вCSS.

Все :nth ПК принимают аргументы, которые представлены формулой в круглых скобках. Формула может быть одним числом, формулой со структурой an+b или словами odd(нечетный)/even(четный).

В формулах типа an+b:

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

Используем греческий алфавит. Ниже есть несколько примеров, использующих одну HTML структуру:

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

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:

:lang

ПК :lang соответствует языку элемента, который определен комбинацией атрибута lang=””, определенного meta элемента и информации из заголовка полученного по протоколу HTTP.

Html-атрибут lang=”” обычно используется в теге html, но так же может быть и у другого тега, если это необходимо.

В сопроводительном примечании написано, что считается хорошим тоном указывать в CSS-свойстве quotes какие кавычки должны быть установлены в документе. Тем не менее большинство браузеров (включая IE9 и выше) способны добавлять правильные кавычки автоматически, если они не объявлены явно в CSS.

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

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

Тем не менее в большинстве примеров, найденых в сети, кавычки установлены при помощи CSS и выглядят так (что соответствует правильному варианту в немецком языке):

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

Давайте определим стиль кавычек через CSS.

HTML:

Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.

CSS:

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

Demo:

:dir (эксперимент)

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

В настоящий момент доступны два значения для направления: ltr (слева направо) и rtl (справа налево).

На момент написания статьи только Firefox (с вендорным префиксом -moz-dir()) поддерживает ПК :dir. Очень похоже, что скоро это изменится. Поэтому в примере показаны оба варианта — с префиксом и без.

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

Пример: параграф написан на арабском языке (направление текста справа налево). Текст будет оранжевого цвета.

HTML:

التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.

CSS:

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

Параграф ниже написан на английском (слева направо). Текст будет синим.

HTML:

If you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.

CSS:

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

Demo:

Псевдоэлементы с псевдоклассами

Несколько минут назад мы выяснили, что псевдоклассы применяются к элементам, а псевдоэлементы — не элементы. Значит, псевдоэлементов со своими псевдоклассами быть не может?

Я был уверен в этом до прошлого года, когда увидел этот твит Шиме Видаса, ведущего ежедневного дайджеста webplatformdaily.org. Но пример c действительно работает в «хромоподобных» браузерах — при активации другого окна цвет выделения меняется!

Я предположил, что такой синтаксис — нововведение CSS Selectors 4, поэтому и работает только в браузерах с его поддержкой. На что Шиме указал мне на удивительную вещь: оказывается, из CSS Selectors 3 он не противоречит! Действительно, формальное определение «последовательности простых селекторов» не ограничивает числа как псевдоклассов, так и псевдоэлементов, ограничение в один псевдоэлемент на цепочку есть только в текстовом пояснении, а формального запрета на псевдоклассы после псевдоэлементов нет вообще. Практической пользы от этого знания мало, разве что лишнее напоминание о разнице между «валидностью» и «соответствием стандарту» и о том, что полагаться на валидаторы (хотя сам валидатор CSS на подобную запись как раз ругается). Но приятно чувствовать себя «почти знатоком». А заодно еще большим уважением проникаешься к создателям парсеров и анализаторов CSS, которые вынуждены постоянно это всё распутывать.

Впрочем, 3-й уровень селекторов вполне можно уже считать устаревшим (помните, что статус рекомендации у W3C означает не «готово, используйте», а скорее «используется так давно, что мы сами уже почти разобрались, как это работает»?:). Давайте снова заглянем :

То есть не для всех и не всегда… но в принципе можно! Но как же правило, что псевдоклассы применяются только к элементам? Можно сказать, что оно осталось в силе, только элементы теперь учитываются не в DOM, а в дереве отрисовки (или «», в терминах спецификации CSS Display 3 уровня).

Обратите внимание: навешивать на псевдоэлементы можно псевдоклассы только одного типа — для действий пользователя. Варианты вроде стандарт пока прямо запрещает

С одной стороны, это логично ( считают элементы в DOM, а псевдоэлементы туда не попадают), с другой — обидно, как от любого ограничения. Зато чуть понятнее, для чего вообще нужна их классификация.

Впрочем, именно для выделения в неактивном окне спецификация псевдоэлементов недавно предложила отдельный псевдоэлемент (::selection-inactive). Видимо, даже для авторов спецификации псевдокласс для псевдоэлемента — слишком уж радикальное новшество. Зато в браузерах (как минимум, Chrome, Firefox и Edge) успешно поддерживаются состояния для многих псевдоэлементов форм, типа .

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

В одном из примеров Аны Тюдор (о котором она не так давно подробно рассказывала) в скомпилированном CSS встречается такой селектор:

input::-webkit-slider-thumb:before { // стили...

Как? Ладно, псевдоэлементы могут быть не в конце селектора. Ладно, у них могут быть состояния. Но свои псевдоэлементы?

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

Примером такого псевдоэлемента с внутренней структурой текущая версия спецификации приводит ::shadow. Больше нигде в этом модуле такой псевдоэлемент не упоминается. В модуле псевдоэлементов — тоже. Упоминается он только в модуле CSS Scoping 1 уровня — причем только в публичном черновике, из он пропал. За эти два года сама теневая DOM изрядно , ну и связанный с ней CSS заодно.

Так что, похоже, единственный пока псевдоэлемент, у которого могут быть настоящие полноценные потомки (!), остается нестандартным. Хотя по-прежнему работает в Chrome. По логике, раз у чего-то есть контент, то могут быть и генерируемые псевдоэлементы перед и после этого контента… но нет: никакой ::shadow::before у меня так и не заработал, да и по спецификации ::shadow не генерирует никаких боксов, отображаются только сами его потомки. По новой спецификации, правда, специальные места для вставки теневых ветвей — «слоты» — должны вести себя как элементы с display:contents, а псевдоэлементы у таких элементов (там, где он поддерживается, т.е. в Firefox) вполне отображаются. Ведь визуально они — полные аналоги настоящих потомков. Но на старую хромовскую реализацию это, разумеется, уже повлиять не может.

Так что, как бы ни хотелось мне закончить статью работающим примером псевдоэлемента для псевдоэлемента, на сегодняшний день мне пришлось в этом признать поражение. Но, как мы видели, новые черновики готовят нам массу сюрпризов, и кое-что из того, что прежде казалось немыслимым, уже работает в каком-то из браузеров (пусть за флагом и т.п.). Возможно, найти такой (или еще более невозможный) пример удастся вам? Добро пожаловать в комментарии!

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

Итак, в нынешнем стандарте на один селектор может приходиться только один псевдоэлемент. Так ли уж это мало? Взгляните на пример:

See the Pen XdmYwm by Ilya Streltsyn (@SelenIT) on CodePen.

С виду в этом блоке 3 разностилевых блока контента — заголовок, подзаголовок и текст. Но в разметке блок пуст, и весь его контент сгенерирован стилями. Два блока, в начале и конце элемента — понятно, и . Откуда взялся третий?

А его и нет! Есть лишь первая строка содержимого . Она же — первая видимая строка самого элемента

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

А чтобы первая строка кончалась строго там, где нужно, используем маленький хак с символом \A (перенос строки) в тексте в сочетании с (идея, которую давно предложила Лиа Веру, а недавно напомнил Крис Койер).

Как всегда, не обошлось без ложки дёгтя: Chrome не хотел применять к тексту . Хотя по спецификации должен. Это был давний его баг (добавлено 20.12.2017: недавно его исправили, в стабильном 63-м его уже нет), видимо, унаследованный от совсем древнего бага Вебкита. Cамое занятное там происходит при наведении мышкой: у элемента появляются… сразу две «первых строки»! Если задан и для , и для , первая строка подсвечивается у обоих. Это тоже явный баг: по спецификации первая строка выделяется только у одного блочного потомка, на то она и первая. Если нужно блочное (снаружи) поведение для , но не нужна такая хромья самодеятельность, можно поменять ему на — для флекс-контейнеров, по спецификации же, . Именно это сделано в примере в обычном состоянии, без наведения.

Но Firefox и сам не ангел: он вообще не применяет стиль , если у стоит (можно увидеть это, наведя на блок мышкой). У него свои «счеты» с псевдоэлементами, не менее давние.

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

Только IE11 и Edge справился с ситуацией. Напоминаю, что речь о псевдоэлементах из CSS1-2, без малого 20-летней выдержки! Кто там еще ждет, когда все браузеры начнут одинаково поддерживать флексбоксы?

Впрочем, иногда, когда по каким-то причинам нельзя влиять на разметку, а кроссбраузерность не критична, это сочетание псевдоэлементов может оказаться весьма кстати. Предельный случай — примеры чего-нибудь интересного на чистом CSS. Вроде нашей прошлогодней мини-игры. Таким нехитрым приемом можно придать ей более эффектную заставку. И даже по-разному анимировать «заголовок» и «текст» (см. чуть обновленный пример, и не забудьте заглянуть в исходник в Firefox).

Ссылка на основную публикацию