ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

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

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

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


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

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

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

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

Синтаксис

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

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

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

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

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

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


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

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

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

Пример

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

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

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

Пример

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
Попробуйте сами »

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

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

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (только если "float" установлен "none")
  • text-transform
  • line-height
  • float
  • clear

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

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

Пример

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 псевдо-элемент - ::selection

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

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

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

Пример

::selection {
  color: red;
  background: yellow;
}
Попробуйте сами »

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


Все 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-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> без атрибута "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 Выбирает все посещенные ссылки