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 | Выбор всех посещенных ссылок |