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

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

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

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

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

Синтаксис

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

селектор::псевдо-элемент {
свойство:значение;
}

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

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

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

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

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

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

Следующий пример форматирует первую строку текста во всех элементах <p>:

Пример

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

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

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

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

Свойство font
Свойство color
Свойство background
Свойство word-spacing
Свойство letter-spacing
Свойство text-decoration
Свойство vertical-align
Свойство text-transform
Свойство line-height
Свойство clear

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

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

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

Пример

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

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

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

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

Свойство font
Свойство color
Свойство background
Свойство margin
Свойство padding
Свойство border
Свойство text-decoration
Свойство vertical-align (только если float содержит none)
Свойство text-transform
Свойство line-height
Свойство float
Свойство clear

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

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

Пример

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

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

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

Псевдо-элементов несколько

Может быть объединено несколько псевдо-элементов.

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

Пример

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

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

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

CSS Псевдо-элемент - ::before

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

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

Пример

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

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

CSS Псевдо-элемент - ::after

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

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

Пример

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

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

CSS Псевдо-элемент - ::marker

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

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

Пример

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

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

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

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

Указанные ниже свойства CSS могут применяться к ::selection: color, background, cursor, и outline.

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

Пример

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

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

CSS Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Установите цвет фона первой строки параграфа на красный.

<style>
 {
  background-color: red;
}
</style>

<body>

<p class="intro">
В мои молодые и более уязвимые годы
мой отец дал мне несколько советов, которые я
с тех пор прокручиваю в уме.
"Всякий раз, когда тебе захочется кого-нибудь покритиковать, - сказал он мне,
- просто помни, что у всех людей в этом мире
не было тех преимуществ, которые были у тебя."
</p>

</body>

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

Селектор	Пример	Описание примера
::after	p::after	Вставить что-то после содержания каждого элемента <p>
::before	p::before	Вставить что-то перед содержанием каждого элемента <p>
::first-letter	p::first-letter	Выбирает первую букву каждого элемента <p>
::first-line	p::first-line	Выбирает первую строку каждого элемента <p>
::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-child	: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> без атрибута "required"
:out-of-range	input:out-of-range	Выбирает элемент <input> со значением, выходящим за пределы указанного диапазона
:read-only	input:read-only	Выбирает элемент <input> с определенным атрибутом "readonly"
:read-write	input:read-write	Выбирает элемент <input> без атрибута "readonly"
:required	input:required	Выбирает элемент <input> с определённым атрибутом "required"
:root	root	Выбирает корневой элемент документа
:target	#news:target	Выбирает текущий активный #news элемент (нажали на URL-адрес, содержащий имя якоря)
:valid	input:valid	Выбирает все элементы <input> с допустимым значением
:visited	a:visited	Выбирает все посещенные ссылки

❮ Назад Далее ❯

CSS Учебник

CSS3 Учебник

CSS Адаптивный

CSS Сетка

CSS Примеры

CSS Справочники

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

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

Синтаксис

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

Пример

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

Пример

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

Пример

Псевдо-элементов несколько

Пример

CSS Псевдо-элемент - ::before

Пример

CSS Псевдо-элемент - ::after

Пример

CSS Псевдо-элемент - ::marker

Пример

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

Пример

CSS Упражнения

Проверьте себя с помощью упражнений

Упражнение:

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

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

Сообщить об ошибке

Ваше предложение:

Спасибо Вам за то, что помогаете!

ТОП Учебники

ТОП Справочники

ТОП Примеры