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

В этой статье мы познакомимся с псевдоэлементами::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:

Содержимое

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

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

HTML:

Содержимое

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

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

Что такое псевдо-элементы?

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

Например, он может быть использован для:

• Стиль первой буквы или строки элемента
• Вставка содержимого до или после содержимого элемента

Синтаксис

Синтаксис псевдо-элементов:

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

Обратите внимание на двойную нотацию двоеточия- ::first-line Против:first-line

Двойной двоеточие заменил нотацию одиночной двоеточия для псевдо-элементов в CSS3. Это была попытка W3C различать псевдо-классы и псевдо-элементы .

Синтаксис с одним двоеточием использовался как для псевдо-классов, так и для псевдо-элементов в CSS2 и CSS1.

Для обратной совместимости синтаксис с одним двоеточием приемлем для CSS2 и CSS1 псевдо-элементов.

Псевдо-элемент:: первая строка

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

В следующем примере форматируется первая строка текста во всех

Элементах:

Пример

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

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

Следующие свойства применяются к::first-line псевдо-элементу:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Псевдо-элемент:: первая буква

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

В следующем примере форматируется первая буква текста во всех

Элементах:

Пример

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

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

Следующие свойства применяются к:: первая буква псевдо-элемент:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if "float" is "none")
• text-transform
• line-height
• float
• clear

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

Псевдо-элементы можно комбинировать с классами CSS:

Пример

p.intro::first-letter {
color: #ff0000;
font-size:200%;
}

В приведенном выше примере будет отображаться первая буква абзацев с классом = "Intro", в красном и в большем размере.

Множественные псевдо-элементы

Также можно комбинировать несколько псевдо-элементов.

В следующем примере первая буква абзаца будет красной, в размер шрифта XX-Large. Остальная часть первой линии будет синей, а в капители. Остальная часть абзаца будет размер шрифта по умолчанию и цвет:

Пример

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

P::first-line {
color: #0000ff;
font-variant: small-caps;
}

CSS-:: перед псевдо-элемент

Псевдо-элемент::before может использоваться для вставки некоторого содержимого перед содержимым элемента.

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

:

Пример

h1::before {
content: url(smiley.gif);
}

CSS-The:: после псевдо-элемент

Псевдо-элемент::after может использоваться для вставки некоторого содержимого после содержимого элемента.

В следующем примере изображение вставляется после содержимого каждого элемента

:

Пример

h1::after {
content: url(smiley.gif);
}

CSS-элемент:: выбор псевдо-элемента

Псевдо-элемент::selection совпадает с частью элемента, выбранного пользователем.

Следующие свойства CSS могут быть применены к::selection: color , background , cursor и outline .

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

Пример

::selection {
color: red;
background: yellow;
}

Все псевдо-элементы CSS

All CSS Pseudo Classes

Псевдоэлементы CSS это своего рода условные составные части уже существующих html тегов.

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

Как пользоваться селекторами псевдоэлементов CSS?

Задачей селектора псеводоэлемента CSS является выбор из структуры документа составных частей элементов подпадающих под характеристики селектора и спецификацию псевдоэлемента.

Задается он при помощи двуеточия после которого следует название используемого псевдоэлемента.

В качестве примера давайте выведем первую букву в абзацах красным цветом большего размера:

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

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

p: first- line span{ color: red; }

Какие бывают псевдоэлементы?

Подводя итоги

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

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

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

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

Что это такое?

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

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

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

После: after

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

Каждый, наверное, хотя бы раз видел на каком-либо сайте анонсы публикаций, после которых стояли слова: «Новинка», «Новое» или «Шок», «Избранное», «Лучшее», «Супер» и т. д. Эти объекты были заданы при помощи псевдоэлемента

Чтобы создать такую позицию, необходимо добавить в каскадную таблицу стилей такой код:

Здесь словом new задается название нового класса, поэтому перед нужным абзацем в HTML разметке нужно вписать: class="new". Название класса должно находиться между скобками открывающего тега. Если все сделать правильно, то после окончания абзаца на странице браузера появится надпись «Кое-что новенькое».

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

До: before

Практически идентичными характеристиками обладает псевдоэлемент С одним небольшим отличием: он предназначен для того, чтобы добавлять необходимые элементы перед объектом. Записывается точно так же, как и after, только со словом before.

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

Чтобы сделать отступы в конце документа, необходимо создать псевдокласс after и вместо content: open написать content: close , соответственным образом поменять позиционирование. Если в псевдоклассе before отступ был от левого поля, то в классе after он должен быть от правого. Также в разметку можно добавить изображение (допустим, тех же кавычек), и текст уже не будет смотреться как унылая простыня.

Эпичная сага: first

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

Этот псевдоэлемент CSS имеет две характеристики - line и letter:

• Letter - изменяет первую букву того фрагмента текста, к которому его добавляют. Таким образом, он формирует буквицу - элемент, в котором базовая линия находится на несколько строк ниже относительно главного текста. Чтобы задать этот параметр в каскадной таблице стилей, нужно задать характеристики для параграфа. Например, P:first-letter {*** } - и уже между скобками указать все необходимые параметры, такие как цвет, шрифт, размер. Если буквицу необходимо создать только для первого абзаца, тогда создается новый класс (так же, как и в примере с new: after ).
• Line - эта позиция полностью меняет первую строку абзаца. Очень удобно использовать в научных публикациях, если нужно выделить важную информацию. Записывается так же, как и прочие примеры. Но здесь важно помнить, что псевдоэлемент выделяет не предложение, а именно строку. В зависимости от того, каким браузером пользуется пользователь, у него первая строка может быть длиннее или короче, поэтому важно следить за тем, чтобы это выделение не смотрелось нелепо. Именно для таких случаев был создан в CSS псевдоэлемент переноса строки.

Новая строка

По факту этот элемент используется редко, ведь его успешно заменяет тег
. Однако существуют ситуации, когда необходимо задавать разрыв строки именно псевдоэлементами. Для этих целей можно использовать тот же after. Для этого записывается следующий код: after { content: "\A"; white-space: pre;} . Название класса нужно вписать между скобками открывающего тега, как только он закроется, после него и будет следовать разрыв строки.

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

Синтаксис псевдоклассов

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

Все псевдоклассы записываются в таблицу каскадных стилей простым и проверенным синтаксисом:

• Селектор: Псевдокласс {характеристики стиля: цвет, размер, отступ, позиционирование и т. д.}

Эти классы можно разделить на три основные группы:

• те, что определяют состояние элемента;
• те, что относятся к псевдоэлементам;
• фиктивные классы, определяющие язык контента.

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

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

• :active. Если применить этот псевдокласс, то при нажатии мышкой на отдельный фрагмент он станет активным. Это проявится в изменении цвета, увеличении размера, или появится анимация.
• :link . В основном применяется к ссылкам, которые пользователь еще не посещал. Они остаются неизмененными.
• :focus . Чаще всего используют для текстовых документов, когда пользователь, установив на поле курсор, может поменять цвет текста. Иногда это используют и для изображений. Например, выставляют картинку затененную, но при щелчке она приобретает естественный цвет.
• :hover . Когда пользователь просто наводит мышкой на определенный объект, он может поменять цвет или форму, при этом ему не нужно делать щелчок.
• :visited . В основном этот псевдокласс предназначен для посещенных ссылок, которые меняют свой цвет на фиолетовый по умолчанию.

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

Специально для псевдоэлементов CSS

К этой группе селекторов относят псевдоклассы, которые могут изменить псевдоэлементы. Таким псевдоклассом является :first-child . В каскадной таблице стилей необходимо создать новый класс для :first-child и задать цвет текста или его размер. Результат будет иметь следующий вид:

• B:first-child { color: red; }

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

Также :first-child используют, чтобы убрать отступ в первом абзаце, тогда вместо color: red; необходимо будет написать text-indent: 0; , а В заменить на Р (также обозначается тег, который отвечает за начало абзаца).

Язык контента

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

• Название класса:lang (язык) {характеристики текста (цвет, и т.д.)}

Что касается позиции "язык", то он обозначается согласно принятым нормам. Например, английский - en, русский - ru, немецкий - de и т. д. Благодаря этому псевдоклассу можно изменить стиль иностранного текста во всем документе.

Выводы

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

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

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