CSS селекторы: псевдоэлементы. CSS - Псевдоэлементы

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

Синтаксис использования псевдоэлементов следующий.

Селектор:Псевдоэлемент { Описание правил стиля }

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

Foo:first-letter { color: red }
.foo:first-line {font-style: italic}

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

:after

Применяется для вставки назначенного контента после содержимого элемента. Этот псевдоэлемент работает совместно со стилевым свойством content , которое определяет содержимое для вставки. В примере 16.1 показано использование псевдоэлемента :after для добавления текста в конец абзаца.

Пример 16.1. Применение:after

HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Ловля льва в пустыне с помощью метода золотого сечения.

Метод ловли льва простым перебором.

Результат примера показан на рис. 16.1.

Рис. 16.1. Добавление текста к абзацу с помощью:after

В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content .

Псевдоэлементы :after и :before , а также стилевое свойство content не поддерживаются браузером Internet Explorer до седьмой версии включительно.

:before

По своему действию :before аналогичен псевдоэлементу :after , но вставляет контент до содержимого элемента. В примере 16.2 показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдоэлемента :before .

Пример 16.2. Использование:before

HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4

• Чебурашка
• Крокодил Гена
• Шапокляк
• Крыса Лариса

Результат примера показан ниже (рис. 16.2).

Рис. 16.2. Изменение вида маркеров с помощью:before

В данном примере псевдоэлемент :before устанавливается для селектора LI , определяющего элементы списка. Добавление желаемых символов происходит путём задания значения свойства content . Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода.

И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору img или input ничего не выведет.

:first-letter

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

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

Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3).

Пример 16.3. Использование:first-letter

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.

Результат примера показан ниже (рис. 16.3).

Рис. 16.3. Создание выступающего инициала

В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.

:first-line

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

К псевдоэлементу :first-line могут применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся к шрифту, изменению цвет текста и фона, а также: clear , line-height , letter-spacing , text-decoration , text-transform , vertical-align и word-spacing .

В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.

Пример 16.4. Выделение первой строки текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

Интересно, а существует ли способ действительно практичного применения свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых перспектив, после чего остается только сказать себе, что вот это вот, это самое сделать по-другому, также изящно и эффектно просто невозможно.

Результат примера показан на рис. 16.4.

Рис. 16.4. Результат применения псевдоэлемента:first-line

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

Вопросы для проверки

1. Какой псевдоэлемент позволяет добавить текст в начало предложения?

1. :after
2. :before
3. :first-line
4. :first-text
5. :first-letter

2. Что делает следующий стиль?

OL LI:first-letter {
color: red;
}

1. Изменяет цвет первой буквы элемента маркированного списка.
2. Изменяет цвет первой буквы элемента нумерованного списка.
3. Изменяет цвет первой строки в маркированном списке.
4. Изменяет цвет первой строки в нумерованном списке.
5. Изменяет цвет текста всего списка.

3. Какой селектор написан с ошибкой?

1. p.new:before
2. abbr:first-line
3. p.new.back:after
4. div:before:first-letter
5. a:hover:before

Ответы

2. Изменяет цвет первой буквы элемента нумерованного списка.

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

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

Пример

При редактировании CSS-файла возникает противоречивая задача. С одной стороны код должен быть удобным для восприятия и редактирования, быстрого отыскания нужного селектора, для чего активно применяются отбивки, комментарии, пробелы и символы табуляции. С другой стороны, объем кода должен быть компактным и не содержать в себе ничего лишнего. Компактность позволяет несколько ускорить загрузку сайта и повысить его производительность.

Данное противоречие решается наличием двух версий CSS-файла: один для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью специализированных программ или сетевых сервисов. Но если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript.

РЕЗУЛЬТАТ:

При редактировании CSS-файла возникает противоречивая задача. С одной стороны код должен быть удобным для восприятия и редактирования, быстрого отыскания нужного селектора, для чего активно применяются отбивки, комментарии, пробелы и символы табуляции. С другой стороны, объем кода должен быть компактным и не содержать в себе ничего лишнего. Компактность позволяет несколько ускорить загрузку сайта и повысить его производительность.

Данное противоречие решается наличием двух версий CSS-файла: один для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью специализированных программ или сетевых сервисов. Но если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript.

Пример

За горами, за лесами,
За широкими морями,
Не на небе – на земле
Жил старик в одном селе...

РЕЗУЛЬТАТ:

За горами, за лесами,
За широкими морями,
Не на небе – на земле
Жил старик в одном селе...

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

При добавлении ::before или ::after к блочному элементу их свойство display может принимать значения block, inline, none, list-item. Все остальные будут восприниматься как block.

При добавлении ::before или ::after к строчному элементу их свойство display может принимать значения inline и none. Все остальные будут восприниматься как inline.

Пример

• α – альфа
• β – бета
• γ – гамма

РЕЗУЛЬТАТ:

• α – альфа
• β – бета
• γ – гамма

К выделенному тексту можно применять свойства color, background и background-color.

Firefox понимает этот псевдоэлемент только с префиксом, т.е. ::-moz-selection

Пример

РЕЗУЛЬТАТ:

Выделите левой кнопкой мыши текст этого абзаца, и он будет на желтом фоне.

Псевдо-элементы позволяют стилизовать определенные части документа. Например псевдо-элемент::first-line предназначен для добавления стилей только к первой строке указанного элемента. В спецификации CSS3 псевдо-элементы начинаются с двойного двоеточия - ":: ":

P::first-letter { font-size: 120%; }

Двойное двоеточие было введено в CSS3 для визуального различия псевдо-классов и псевдо-элементов. Однако, псевдо-элементы, которые были добавлены еще в CSS2 (такие как: first-letter, first-line, before и after), могут быть записаны и с одним двоеточием, такой синтаксис использовался до появления спецификации CSS3 и поддерживается всеми браузерами. Синтаксис с двойным двоеточием поддерживается только в новых версиях браузеров и в обязательном порядке должен применяться только к псевдо-элементу::selection, который был добавлен в CSS3.

Примечание: каждый селектор может содержать только один псевдо-элемент, который должен быть определен в самом конце селектора: #header .menu span::first-letter { color: green; }

Псевдо-элемент::first-letter

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

Наш текст

Попробовать »

Или мы можем стилизовать первую букву в тексте с помощью псевдо-элемента::first-letter, в этом случае нам не придется добавлять лишний элемент в HTML-разметку:

Наш текст

Попробовать »

Псевдо-элемент::first-line

Псевдо-элемент::first-line применяет стиль к первой строке текста в элементе:

P { width: 200px; } p::first-line { color: blue; } Попробовать »

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

Псевдо-элементы::before и::after

Для добавления генерируемого содержимого в документ используются псевдо-элементы::before и::after. С их помощью можно разместить генерируемое содержимое до и после содержимого в указанном элементе. Для определения содержимого, которое будет добавлено, используется CSS свойство content.

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

A { text-decoration: none; color: black; } a::before { content: url("link.png"); } Попробовать »

Селекторы атрибутов

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

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

Img { border: 1px solid red; }

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

• элемент[атрибут^="значение"] ^= означает "начинается с...".
• элемент[атрибут$="значение"] - селектор атрибута с совпадением по подстроке. Оператор $= означает "заканчивается на...".
• элемент[атрибут*="значение"] - селектор атрибута с совпадением по подстроке. Оператор *= означает "содержит подстроку...".

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

A { padding-left: 20px; background-image: url("img1.png"); background-repeat: no-repeat; } a { padding-left: 20px; background-image: url("img2.png"); background-repeat: no-repeat; } a { padding-left: 20px; background-image: url("img3.png"); background-repeat: no-repeat; } Попробовать »

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

В этой статье мы познакомимся с псевдоэлементами::first-line , ::first-letter , ::after , ::before и научимся их применять на практике.

Псевдоэлементы - это вид селекторов, которые могут задать стиль для элементов, которые явно не определены в структуре документа (::first-line , ::first-letter), а также добавлять контент до и после элементов с применением к нему стилей (::after , ::before).

Рассмотрим следующий код:

Lorem ipsum dolor sit amet. Omnis voluptas nulla vero eos et iusto odio dignissimos. A sapiente delectus, ut aliquid. Aliquid ex ea voluptate velit esse, quam nihil impedit, quo minus. Consequuntur magni dolores eos, qui ratione voluptatem. Nobis est et molestiae consequatur, vel. Delectus, ut aliquid ex ea voluptate velit esse. Suscipit laboriosam, nisi ut labore et dolorum. Provident, similique sunt in ea voluptate velit esse quam.

P::first-letter { font-size:200%; color: red; } p::first-line { font-weight:bold; color: blue; } p::before { content: "Начало. "; } p::after { content: " Конец"; font-weight:bold; color:green; }

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

Примечание: несмотря на то, что в стандарте CSS 3 для указания псевдоэлемента используется именно двойное двоеточие, иногда Вы можете увидеть в силу исторических причин одно двоеточие, которое использовалось для указания псевдоэлементов в стандарте CSS 2.1. Все современные браузеры позволяют использовать как одно двоеточие, так и два для указания того, что дальше следует псевдоэлемент. Единственный браузер, который не понимает знак двойного двоеточия, является Internet Explorer 8.

Псевдоэлемент::first-letter

Псевдоэлемент::first-letter предназначен для задания стиля первому символу в тексте элемента. В основном он используется для увеличения размера этого символа посредством применения к нему свойств CSS и соответствующих значений.

HTML:

Содержимое

CSS: p::first-letter { font-size: 200%; color: red; }

Псевдоэлемент::first-line

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

HTML:

Содержимое

CSS: p::first-line { font-style: italic; color: red; }

Псевдоэлементы::after и::before

Псевдоэлементы::after и::before предназначены для добавления контента с помощью CSS свойства content до и после содержимого элемента. Кроме свойства контент, Вы также можете добавить различные CSS свойства, которые будут применены к данному контенту, т.е. к контенту, который появляется до или после содержимого элемента.

От автора: спецификация CSS Pseudo-elements Module Level 4 проливает свет на поведение существующих псевдоэлементов и предоставляет новые. Тем не менее, только несколько из новых псевдоэлементов имеют хоть какую-то поддержку в последних версиях браузеров.

Сегодня мы поговорим о следующих псевдоэлементах:

::before — вставляет генерируемый контент перед контентом элемента

::after — вставляет генерируемый контент после контента элемента

::first-letter — выбирает первую букву элемента

::first-line — выбирает первую строку элемента

::selection — стилизует текст, выделенный курсором

Из них элементы::first–letter, ::first–line и::selection влияют на контент, который входит в исходники. Псевдоэлементы::before и::after, наоборот, вставляют контент в документ, которого нет в исходниках. Разберем поподробнее все псевдоэлементы.

Замечание: синтаксис с одним двоеточием

Вы могли видеть версии::first–letter, ::first–line, ::before и::after с одним двоеточием в старом CSS. В CSS2 эти псевдоэлементы задавались через одноразовое двоеточие:. IE8 требует синтаксис с одинарным двоеточием, хотя большая часть других браузеров поддерживает оба варианта. Лучше использовать синтаксис с двойным двоеточием.

Псевдоэлементы::before и::after

Большая часть псевдоэлементов позволяет выбирать контент, который уже присутствует в исходниках документа, но не задан с помощью языка (другими словами, ваш HTML). Однако::before и::after работают по-другому. Эти псевдоэлементы добавляют генерируемый контент в дерево документа. Созданный контент не существует в HTML исходниках, но он отображается.

Зачем использовать генерируемый контент? Например, можно помечать обязательные поля формы, добавляя контент после лейблов:

/* Применяется к лейблу, ассоциирующемуся с требуемым полем */ .required::after { content: " (Required) "; color: #c00; font-size: .8em; }

В нужном поле формы необходимо использовать HTML свойство required. Так как данная информация уже доступна в DOM, то::before и::after выступают в роли помощников. Это не критический контент, поэтому его можно и не вносить в исходники.

Замечание: генерируемый контент и доступность

Некоторые скрин ридеры и браузеры распознают и читают генерируемый контент, однако большая часть этого не умеет. Не используйте псевдоэлементы::before и::after для предоставления генерируемого контента для пользователей с ограниченными возможностями. Более подробно этот вопрос можно изучить в статье Leonie Watson «поддержка доступности для генерируемого CSS контента ».

Другой способ применения::before и::after – добавление префикса или суффикса в контент. Вышеупомянутая форма может использовать вспомогательный текст, как показано ниже:

Change Your Password

Enter a new password

Retype your password

Longer passwords are stronger.

Save changes

< form method = "post" action = "/save" > < fieldset > < legend > Change Your Password < / legend > < p > < label for = "password" > Enter a new password < / label > < input type = "password" id = "password" name = "password" > < / p > < p > < label for = "password2" > Retype your password < / label > < input type = "password" id = "password2" name = "password2" > < / p > < p class = "helptext" > Longer passwords are stronger . < / p > < p > < button type = "submit" > Save changes < / button > < / p > < / fieldset > < / form >

Заключим наш вспомогательный текст в парные скобки с помощью::before и::after.

Helptext::before { content: "("; } .helptext::after { content: ")"; }

Helptext :: before { content : "(" ; Helptext :: after { content : ")" ;

Результат.

Возможно, самый полезный способ применения::before и::after – очистка обтекаемых элементов. Nicolas Gallagher представил эту технику (которая основана на работе Thierry Koblentz) в своем посте «новый микро clearfix хак »:

/* Для поддержки IE <= 9 используйте:before и:after */ .clearfix::before, .clearfix::after { content: " "; /* Обратите внимание на пробел между кавычек. */ display: table; } .clearfix::after { clear: both; }

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

Псевдоклассы::before и::after ведут себя полностью, как дочерние элементы тега, за которым они закреплены. Они наследуют все возможные свойства родителя и расположены внутри блока родителя. Они также взаимодействуют с другими блоковыми элементами, как если бы они были настоящими тегами. Свойства display: block или display: table на::before и::after работают точно так же, как и на других элементах.

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

На данный момент на один селектор разрешается применять только один псевдоэлемент. То есть запись типа p::first-line::before неправильная.

Создание типографических эффектов с помощью:first-letter

Псевдоэлементы::before и::after вставляют контент, а::first-letter работает с контентом, уже прописанном в исходниках. С его помощью можно создавать эффект первой буквы или буквицы, который вы могли видеть в журналах и книгах.

Замечание: первая буква и буквицы

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

Стили ниже добавляют первую заглавную букву во все параграфы p в документе:

p::first-letter { font-family: serif; font-weight: bold; font-size: 3em; font-style: italic; color: #3f51b5; }

p :: first - letter { font - family : serif ; font - weight : bold ; font - size : 3em ; font - style : italic ; color : #3f51b5;

Из скриншота можно заметить, что::first-letter изменяет line-height первой строки, если элементу было задано значение line-height без единиц измерения. В данном случае все теги p наследуют значение line-height 1.5 от тега body.

Существует три способа сгладить эту проблему:

уменьшить значение line-height для псевдоэлемента::first–letter, почти всегда подойдет значение.5;

задать line-height с единицами измерения для псевдоэлемента::first–letter;

задать line-height с единицами измерения для body или родителя::first–letter.

Первый вариант сохраняет вертикальный ритм, как в случае со значением line-height без единиц измерения. Второй вариант ограничивает сторонние эффекты фиксированного line-height до самих псевдоэлементов. Третий вариант – самый плохой, есть большая вероятность того, что вы создадите побочный эффект, который нужно будет переписывать с помощью дополнительного CSS кода.

В нашем случае давайте уменьшим значение line-height для p::first-letter до.5 (и перепишем свойства в файле, будем использовать сокращенное свойство font):

p::first-letter { font: bold italic 3em / .5 serif; color: #3f51b5; }

p :: first - letter { color : #3f51b5;

Результат можно посмотреть ниже. Заметьте, что нам также нужно было настроить нижний margin каждого параграфа p, чтобы компенсировать уменьшенное значение line-height на p::first-letter.

Для создания буквиц понадобится чуть больше строк CSS. В отличие от первых заглавных букв, прилегающий текст к буквице обтекает ее. То есть нам нужно добавить float: left; в наши стили. Также мы добавим верхний, правый и нижний margin:

p::first-letter { font: bold italic 3em / .5 serif; font-style: italic; color: #607d8b; float: left; margin: 0.2em 0.25em .01em 0; }

p :: first - letter { font : bold italic 3em / . 5 serif ; font - style : italic ; color : #607d8b; float : left ; margin : 0.2em 0.25em . 01em 0 ;

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

Если вы не используете px или rem для установки размеров, margin и line-height, будет очень сложно идеально стилизовать::first-letter во всех браузерах.

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

“Lorem ipsum dolor sit amet, consectetur adipiscing elit.” Fusce odio leo, sollicitudin vel mattis eget, ...

< p > & #8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit.” Fusce odio leo, sollicitudin vel mattis eget, ...

В данном случае стили для::first-letter будут применены как к открывающей кавычке, так и к первой букве, как показано ниже. Стили применяются одинаково во всех браузерах.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio leo, sollicitudin vel mattis eget, iaculis sit ...

< p > < q > Lorem ipsum dolor sit amet , consectetur adipiscing elit . < / q > Fusce odio leo , sollicitudin vel mattis eget , iaculis sit . . . < / p >

На данный момент браузеры отрисовывают тег q в виде кавычек, использующихся в определенном языке, которые будут открываться и закрываться. Однако не все браузеры одинаково распознают такие кавычки. В Firefox 42 (см. ниже), Safari 8 и более ранних версиях::first-letter изменяет только открывающую кавычку.

В Chrome, Opera и Yandex открывающая кавычка тега q и первая буква параграфа не стилизуются. Ниже показан скриншот в Chrome.

IE применяет стили как к открывающей кавычке, так и к первой букве параграфа. Смотрите ниже.

В спецификации CSS Pseudo-elements Module Level 4 говорится, что знак пунктуации, предшествующий или следующий сразу после первой буквы или символа должен стилизоваться. Однако в спецификации нет точного разъяснения насчет применения стилей к генерируемым знакам пунктуации.

Баги браузеров при использовании::first-letter

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

В Firefox 39 и раньше некоторые символы заставляют Firefox игнорировать правило::first–letter: ‑,$,^,_,+,`,~,>,<.>

Это относится к случаям, когда первый символ задан через::before и свойство content, а также если он прописан в исходниках документа. Фикса этого бага нет. Если используете::first-letter, вам придется избегать этих символов в начале параграфа.

Замечание: баги в Blink браузерах

Некоторые версии Blink браузеров не применят правило::first–letter, если у родителя задано свойство display со значением inline или table. Баг есть в Chrome 42, Opera 29 и Yandex 15. Баг пофиксили в Chrome 44, однако релиз увидит свет не раньше, чем эта книга окажется у вас в руках. Самый простой способ обойти баг – добавить к родителю свойство display: inline-block, display: block или display: table-cell.

Создание типографических эффектов с помощью::first-line

Псевдокласс::first-line работает почти как::first-letter, только эффект распространяется на всю первую строку элемента. Можно, например, делать первую строку каждого параграфа больше и изменять цвет текста:

Можно принудительно поставить конец первой строки с помощью br или hr, как показано ниже. К сожалению, это не всегда работает. Если ваш элемент может вместить только 72 символа, то тег br после 80-го символа никак не повлияет на псевдоэлемент::first-line. Вы просто получите странный разрыв строки.

Точно так же и с неразрывным пробелом (), который вставляется, чтобы не разрывать слова между строк. Это никак не повлияет на::first-line. Слово, которое расположено перед будет принудительно перемещено на строку, где расположен текст после неразрывного пробела.

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

Если генерируемый текст достаточно длинный, он полностью заполнит первую строку. Однако если добавить display: block (например, p::before {content: ‘!!!’; display: block;}), то контент займет всю первую строку целиком.

К сожалению, этот баг до сих пор есть в Firefox 40 и более ранних версиях. Firefox полностью игнорирует правило.

Забавные интерфейсы с помощью::selection

Псевдоэлемент::selection относится к так называемым «подсвечивающим» псевдоэлементам, прописанным в спецификации CSS Pseudo-Elements Module Level 4. Данный подсвечивающий псевдоэлемент ранее входил в спецификацию Selectors Level 3, единственный, поддерживающийся в браузерах.

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

С::selection можно использовать не все свойства. В спецификации прописаны только следующие свойства:

Помните о доступности при выборе цвета переднего фона и заднего фона для::selection. Некоторые комбинации цветов дают плохой контраст для слабо видящих людей. Другие комбинации могут быть неразборчивыми для дальтоников. Перед конечным выбором цветов используйте инструмент проверки контраста и симулятор дальтонизма.

В Pseudo-Elements Module также прописаны псевдоклассы::spelling-error и::grammar-error. Когда они будут реализованы, мы сможем стилизовать текст с ошибками, проверяемыми по словарю браузера.