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

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

Вот перечень всех псевдоэлеметов:

  • :first-letter – Стиль первой буквы текстового блока
  • :first-line – Стиль первой строки текстового блока
  • :after – Добавляет содержимое после элемента.
  • :before – Добавляет содержимое до элемента.
  • ::selection – Стиль выделенного пользователем текста.

Так же как и в случае с псевдоклассами, псевдоэлементы используются согласно следующего синтаксиса:

p:first-letter { color:#ff0000}

где:

p – селектор, к которому применяется псевдоэлемент.
:first-letter – после двоеточия собственно псевдоэлемент. *примечание
{color:#ff0000} – блок объявления стилей в фигурных скобках.

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

Ну что ж давайте пробежимся по перечисленным псевдоэлементам.

Стиль первой буквы.

Псевдоэлемент first-letter задаёт стиль первой буквы в каком либо текстовом блоке, проще говоря, без особых усилий позволяет сделать “буквицу”. Вы заметили, что на этом сайте первые буквы в абзацах отличны цветом и размером от других букв? – это и есть пример работы псевдоэлемента first-letter.

Ну а если Вам этого примера мало можете взглянуть на ещё один:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Псевдоэлемент first-letter.</title>
<style type=”text/css”>
p {
font: 16px Arial;
}
p:first-letter {
font: bold 24px Verdana;
color:#ff0000
}
</style>
</head>
<body>
<p>Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.<p>
<p>Осмысливая мысли, в смысле смысла, есть смысл, помыслить о немыслимом..<p>
</body>
</html>

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

Стиль первой строки.

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

Пример:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Псевдоэлемент first-line.</title>
<style type=”text/css”>
body {background-color: #fffacd}
p {color: #005}
p:first-line {
font: 16px Arial; 
color: #f00
}
</style>
</head>
<body>
<p>Если бы при приеме на работу… … …</p>
<p>Однажды молодой сисадмин … … …</p>
</body>
</html>

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

Контент.

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

Всё вместе пишется так:

p:after {content: “Конец, а кто слушал молодец!!”; }

Теперь после каждого параграфа будет добавляться надпись: “Конец, а кто слушал молодец!!”

Значением свойства content может быть:

  • “текст” – собственно любой текст или символы.
  • “\0410” – юникод.
  • url(путь)– адрес какого либо объекта.
  • open-quote – открывающая кавычка.
  • close-quote – закрывающая кавычка.
  • no-open-quote – отменяет открывающую кавычку.
  • no-close-quote – отменяет закрывающую кавычку.
  • inherit – наследует значение элемента родителя.
  • none – ничего не добавляется.
  • normal – для псевдоэлементов before и after тоже самое что и none.
  • counter – показывает значение счетчика, заданного свойством counter-reset.
  • attr(атрибут тега) – показывает текст, который является значением атрибута того или иного тега указанного в скобках.

Пример:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Псевдоэлементы after и before</title>
<style type=”text/css”>
*:before {color: #00f; font-variant: small-caps;}
*:after {color: #f00; font-variant: small-caps;}
body:before {content: “начало документа”;}
body:after {content: “конец документа”;}
p:before {content: “анекдот:”;}
p:after {content: “:-)”; font-size: x-large;}
ul {list-style-type: none;}
li:before {content: “№ “; color: #0f0;}
h4:before{content:url(graphics/marker.gif);}
q:before {content: open-quote; font-size: 30px;}
q:after {content: close-quote; font-size: 30px;}
img:after {content:attr(src);}
</style>
</head>
<body>
<hr>
<h4>Заголовок с сердечком.</h4>
<h4>Параграфы с добавлением слова “анекдот:” вначале и смайлика в конце:</h4>
<p>Если бы при приеме на работу…</p>
<p>Однажды молодой сисадмин…</p>
<h4>После рисунка добавляется значение его атрибута: “src” – путь к рисунку:</h4>
<img src=”graphics/fon.jpg”>
<h4>Цитата в кавычках:</h4>
<q>Лёд тронулся, господа присяжные заседатели!</q>
<h4>Список с нестандартными маркерами:</h4>
<ul>
<li> Первый
<li> Второй
<li> Третий
</ul>
<hr>
</body>
</html>

Чувствую перехитрил я с примером, поэтому несколько комментариев к нему:

Звездочка перед псевдоэлементом *:псевдоэлемент{свойство} говорит о том, что указанные правила стиля распространяются на все элементы. Так в нашем примере текст в начале везде синий, а в конце везде красный, если он конечно не указывается дополнительно, как например в случае с зелёными “маркерами” в списке из примера.

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

Спецсимволы HTML (например, спецсимвол: &para;), будут отображаться простым текстом (&para; а не ) так что если необходимо добавить какую либо хитрую закорючку используйте юникод.

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

Псевдоэлемент ::selection.

Псевдоэлемент ::selection (я не опечатался, пишется именно с двумя двоеточиями) указывает на стиль выделенного пользователем текста.

Данный псевдоэлемент появился на свет только в спецификации CSS3 и к сожалению поддерживается не всеми браузерами так IE его полностью игнорирует, а браузер Firefox использует свой аналогичный псевдоэлемент ::-moz-selection который официально не входит в спецификацию CSS.

Пример:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Псевдоэлемент ::selection</title>
<style type=”text/css”>
p::selection {
color: #f00;
background: #0f0;
}
</style>
</head>
<body>
<p>Попробуете выделить данный текст, как будто Вы собираетесь его скопировать. Если Ваш браузер (например Opera 9.6 и выше) поддерживает псевдоэлемент ::selection, Вы увидите, что выделенный текст станет красным, а его фон зелёным.</p>
</body>
</html>

К данному псевдоэлементу можно применить только следующие CSS свойства: colorbackground и background-color.

Полезные советы:

  • В спецификации CSS3 в отличии от CSS2 и CSS2.1 все псевдоэлементы принято писать с двумя двоеточиями ::first-letter, ::first-line, ::after, ::before, и новый ::selection – таким вот способом разработчики решили оделить пседоэлементы от псевдоклассов. Однако такой синтаксис напрочь игнорирует Internet Explorer до 9 версии включительно! Так что пока псевдоэлементы лучше писать по старинке с одним двоеточием. Однако следует понимать, что например :first-letter и ::first-letter это формально два разных псевдоэлемента.
  • В правилах стиля для псевдоэлементов допустимо использовать только свойства, относящиеся к шрифту, тексту и его фону.

Залишити відповідь