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

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

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

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

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. Какой псевдоэлемент позволяет добавить текст в начало предложения?

:after
:before
:first-line
:first-text
:first-letter

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

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

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

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

p.new:before
abbr:first-line
p.new.back:after
div:before:first-letter
a:hover:before

Ответы

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

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

/* The first line of every

Element. */ p::first-line { color: blue; text-transform: uppercase; }

Syntax

selector::pseudo-element { property: value; }

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

Index of standard pseudo-elements

Browser	Lowest Version	Support of
Internet Explorer	8.0	:pseudo-element
Internet Explorer	9.0
Firefox (Gecko)	1.0 (1.0)	:pseudo-element
Firefox (Gecko)	1.0 (1.5)	:pseudo-element::pseudo-element
Opera	4.0	:pseudo-element
Opera	7.0	:pseudo-element::pseudo-element
Safari (WebKit)	1.0 (85)	:pseudo-element::pseudo-element

Псевдо-элементы позволяют стилизовать определенные части документа. Например псевдо-элемент::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; } Попробовать »

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

Цель урока: Рассмотрение понятия «медиа-запросы» для создания отзывчивой верстки. Знакомство с псевдоклассами и псевдоэлементами в CSS. Рассмотрены примеры создания стилей

Медиа-запросы — логическое выражение, которое может быть равно истине (true) или лжи (false)

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

Медиа-запрос записывается либо в стилевом файле, либо во вложенном стиле и имеет следующую структуру:

All — все устройста. Может быть screen | print | tv

max-width — медиа функция , которая может задавать параметры указанного устройства или разрешение экрана

В примере устройство с максимальным разрешением экрана — 480px и с минимальным — 320px:

Из примера видно, что функции могут содержать логические условия: AND — И, NOT — НЕ и ONLY — только

Медиа-запросы логично размещать после всех описанных стилей

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

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

Важно: На псевдокласс указывает наличие двоеточия (:)

Три псевдокласса определены именно для гиперссылки (для тега a):

* active — псевдокласс не только для гиперссылки

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

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

input:focus{...} /* в тот момент, когда элемент получает фокус */ input:active{...}/* в момент активации элемента */

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

Выполнение:

Результат:

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

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

Псевоэлементы, определяющие новые элементы:

элемент:first-letter {...}/* первая буква или символ элемента */ элемент:first-line {...}/* первая строка элемента */

Выполнение:

К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль.

Результат:

Псевоэлементы, генерирующие содержимое:

элемент:before {content:""}/* генерирует текст перед элементом */ элемент:after {content:""} /* генерирует текст после элемента */

Пример: К содержимому абзаца с классом new добавить дополнительное слово — Ого! .

Выполнение:

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

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

Результат:

Пример: Для маркированного списка убрать маркер и установить вместо него какой-либо символ

Выполнение:

ul { list-style-type: none; /* Прячем маркеры списка */ } li:before { content: "\20aa "; /* Добавляем перед элементом списка символ в юникоде */ }

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

Результат:

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

Текст:

<body > <h1 > Стих 1</ h1 > Я понял, что пришедшее извне

(Угли недолго проживут

Вот так и жду, не шевелясь, Когда уйдут из сердца лица, Ушедшие однажды с глаз, <hr > <h1 > Стих 2</ h1 > Обещай, что вернешься Домой. Эти зимы меня одолеют. Я смотрю на тебя и не смею

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

Обещай, что в далеком краю, Если станет тебе одиноко,

И поселится в сердце покой. Обещай, что когда-нибудь все же ты конечно вернешься Домой. <hr > </ body >

Стих 1

Вопрос такой: зачем все это мне?
Но, не найдя ответа на подходе,
Я понял, что пришедшее извне
Стремительно вовне же и уходит.

Другой вопрос - как быть? Но тут
Ответ просился сам: бездействуй!
(Угли недолго проживут
В костре, где все без происшествий.)

Вот так и жду, не шевелясь,
Когда уйдут из сердца лица,
Ушедшие однажды с глаз,
Чтоб никогда не возвратиться.

Стих 2

Обещай, что вернешься Домой.
Эти зимы меня одолеют.
Я смотрю на тебя и не смею
Прикоснуться холодной рукой.

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

Обещай, что в далеком краю,
Если станет тебе одиноко,
Ты прочтешь эти добрые строки
Про бескрайнюю Нежность мою.

И поселится в сердце покой.
Нет тебя мне на свете дороже.
Обещай,
что когда-нибудь все же
ты конечно вернешься Домой.

Последнее обновление: 21.04.2016

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

::first-letter : позволяет выбрать первую букву из текста

::first-line : стилизует первую строку текста

::before : добавляет сообщение до определенного элемента

::after : добавляет сообщение после определенного элемента

::selection : выбирает выбранные пользователем элементы

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

Стилизуем текст, используя псевдоэлементы first-letter и first-line:

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

Но он ничего не видал. Над ним не было ничего уже, кроме неба, - высокого неба, не ясного, но все-таки неизмеримо высокого, с тихо ползущими по нем серыми облаками.

Используем псевдоэлементы before и after:

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

Не пытайтесь засунуть язык в электрическую розетку.

Здесь псевдоэлеметы применяются к элементу с классом warning . Оба псевдоэлемента принимают свойство content , которое хранит вставляемый текст. И также для повышения внимания псевдоэлементы используют выделение текста жирным с помощью свойства font-weight: bold; .

Используем псевдоэлемент selection для стилизации выбранных элементов:

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

Пседвоэлементы в CSS3 позволяют форматировать текст.