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

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

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

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

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

Синтаксис

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

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

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

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

В следующем примере форматируется первая строка текста во всех тегах <p>. элементы:

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>

</body>
</html>

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

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

свойства шрифта
свойства цвета
свойства фона
межсловный интервал
Межбуквенное расстояние
текст-оформление
вертикальное выравнивание
преобразование текста
высота линии
прозрачный

Обратите внимание на двойное двоеточие: ::first-line по сравнению с :first-line

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

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

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

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

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

В следующем примере первая буква текста форматируется во всех <p>. элементы:

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

</body>
</html>

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

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

свойства шрифта
свойства цвета
свойства фона
свойства маржи
свойства заполнения
свойства границ
текст-оформление
вертикальное выравнивание (только если «float» равно «none»)
преобразование текста
высота линии
плавать
прозрачный

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

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

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}  
</style>
</head>
<body>

<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>

</body>
</html>

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

Несколько псевдоэлементов

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

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

Пример

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

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>

</body>
</html>

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

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

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

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

<h1>This is a heading</h1>

</body>
</html>

CSS — псевдоэлемент ::after

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

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

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>

<h1>This is a heading</h1>

</body>
</html>

CSS — псевдоэлемент ::marker

Псевдоэлемент ::marker выбирает маркеры элементов списка.

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

Пример

::marker { 
  color: red;
  font-size: 23px;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
::marker { 
  color: red;
  font-size: 23px;
}
</style>
</head>
<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

</body>
</html>

CSS — псевдоэлемент ::selection

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

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

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

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>

<h1>Select some text on this page:</h1>

<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>

</body>
</html>

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

::after

Пример

p::after

Пример описания

Вставьте что-нибудь после содержимого каждого элемента <p>.

::before

Пример

p::before

Пример описания

Вставьте что-нибудь перед содержимым каждого элемента <p>.

::first-letter

Пример

p::first-letter

Пример описания

Выбирает первую букву каждого элемента <p>

::first-line

Пример

p::first-line

Пример описания

Выбирает первую строку каждого элемента <p>

::marker

Пример

::marker

Пример описания

Выбирает маркеры элементов списка

::selection

Пример

p::selection

Пример описания

Выбирает часть элемента, выбранную пользователем.

Все псевдоклассы CSS

:active

Пример

a:active

Пример описания

Выбирает активную ссылку

:checked

Пример

input:checked

Пример описания

Выбирает каждый отмеченный элемент <input>

:disabled

Пример

input:disabled

Пример описания

Выбирает каждый отключенный элемент <input>

:empty

Пример

p:empty

Пример описания

Выбирает каждый элемент <p>, у которого нет дочерних элементов.

:enabled

Пример

input:enabled

Пример описания

Выбирает каждый включенный элемент <input>

:first-child

Пример

p:first-child

Пример описания

Выбирает каждый элемент <p>, который является первым дочерним элементом своего родителя.

:first-of-type

Пример

p:first-of-type

Пример описания

Выбирает каждый элемент <p>, который является первым элементом <p> его родительского элемента.

:focus

Пример

input:focus

Пример описания

Выбирает элемент <input>, имеющий фокус.

:hover

Пример

a:hover

Пример описания

Выбирает ссылки при наведении курсора мыши

:in-range

Пример

input:in-range

Пример описания

Выбирает элементы <input> со значением в указанном диапазоне.

:invalid

Пример

input:invalid

Пример описания

Выбирает все элементы <input> с недопустимым значением.

:lang(language)

Пример

p:lang(it)

Пример описания

Выбирает каждый элемент <p> со значением атрибута lang, начинающимся с «it».

:last-child

Пример

p:last-child

Пример описания

Выбирает все элементы <p>, которые являются последними дочерними элементами своего родителя.

:last-of-type

Пример

p:last-of-type

Пример описания

Выбирает каждый элемент <p>, который является последним элементом <p> его родительского элемента.

:link

Пример

a:link

Пример описания

Выбирает все непосещенные ссылки

:not(selector)

Пример

:not(p)

Пример описания

Выбирает каждый элемент, который не является элементом <p>

:nth-child(n)

Пример

p:nth-child(2)

Пример описания

Выбирает каждый элемент <p>, который является вторым дочерним элементом своего родителя.

:nth-last-child(n)

Пример

p:nth-last-child(2)

Пример описания

Выбирает каждый элемент <p>, который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента.

:nth-last-of-type(n)

Пример

p:nth-last-of-type(2)

Пример описания

Выбирает каждый элемент <p>, который является вторым элементом <p> своего родителя, считая от последнего дочернего элемента.

:nth-of-type(n)

Пример

p:nth-of-type(2)

Пример описания

Выбирает каждый элемент <p>, который является вторым элементом <p> его родительского элемента.

:only-of-type

Пример

p:only-of-type

Пример описания

Выбирает каждый элемент <p>, который является единственным элементом <p> его родительского элемента.

:only-child

Пример

p:only-child

Пример описания

Выбирает каждый элемент <p>, который является единственным дочерним элементом своего родителя.

:optional

Пример

input:optional

Пример описания

Выбирает элементы <input> без «обязательного» атрибута.

:out-of-range

Пример

input:out-of-range

Пример описания

Выбирает элементы <input> со значением вне указанного диапазона.

:read-only

Пример

input:read-only

Пример описания

Выбирает элементы <input> с указанным атрибутом «только для чтения».

:read-write

Пример

input:read-write

Пример описания

Выбирает элементы <input> без атрибута «только для чтения».

:required

Пример

input:required

Пример описания

Выбирает элементы <input> с указанным «обязательным» атрибутом.

:root

Пример

root

Пример описания

Выбирает корневой элемент документа

:target

Пример

#news:target

Пример описания

Выбирает текущий активный элемент #news (при нажатии на URL-адрес, содержащий это имя привязки)

:valid

Пример

input:valid

Пример описания

Выбирает все элементы <input> с допустимым значением.

:visited

Пример

a:visited

Пример описания

Выбирает все посещенные ссылки

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

Оглавление

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

Синтаксис

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

Пример

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

Пример

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

Пример

Несколько псевдоэлементов

Пример

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

Пример

CSS — псевдоэлемент ::after

Пример

CSS — псевдоэлемент ::marker

Пример

CSS — псевдоэлемент ::selection

Пример

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

::after

::before

::first-letter

::first-line

::marker

::selection

Все псевдоклассы CSS

:active

:checked

:disabled

:empty

:enabled

:first-child

:first-of-type

:focus

:hover

:in-range

:invalid

:lang(language)

:last-child

:last-of-type

:link

:not(selector)

:nth-child(n)

:nth-last-child(n)

:nth-last-of-type(n)

:nth-of-type(n)

:only-of-type

:only-child

:optional

:out-of-range

:read-only

:read-write

:required

:root

:target

:valid

:visited