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

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

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

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

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

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

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

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

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

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

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

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

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

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 классы

Псевдоэлементы могут быть в сочетании с HTML классами:

Пример

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

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

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

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

Несколько псевдоэлементов также могут быть объединены.

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

Пример

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;
}

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

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

Упражнение: псевдоэлемент p

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

<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

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

Упражнение: псевдоэлемент p

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

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

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

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

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