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

CSS Tutorial

CSS HOME CSS Introduction CSS Syntax CSS How To CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Flexbox CSS Media Queries CSS MQ Examples

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks

CSS Grid

Grid Intro Grid Container Grid Item

CSS Examples

CSS Templates

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support

CSS Pseudo-elements


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

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

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

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

Синтаксис

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

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

Обратите внимание на двойную нотацию двоеточия- ::first-line Против:first-line

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

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

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


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

::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 псевдо-элемент используется для добавления специального стиля к первой букве текста.

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

Пример

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

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

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

  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear

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

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

Пример

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

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


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

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

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

Пример

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

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

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

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

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

Пример

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

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

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

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

Пример

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

CSS-элемент:: выбор псевдо-элемента

Псевдо-элемент ::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 Выбор части элемента, выбранной пользователем

All CSS Pseudo Classes

Selector Example Пример описания
: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> элементов с указанным атрибутом "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 Выбор всех посещенных ссылок