CSS Псевдоэлементы
Что такое псевдоэлементы?
CSS псевдоэлемент используется для стилизации определенных частей элемента.
Например, его можно использовать для:
- Стилизации первой буквы или строки элемента
- Вставки содержимого до или после содержимого элемента
Синтаксис
Синтаксис псевдоэлементов:
selector::pseudo-element {
property:value;
}
Псевдоэлемент ::first-line
Псевдоэлемент ::first-line используется для добавления специального стиля к первой строке текста.
В следующем примере форматируется первая строка текста во всех элементах <p>
Примечание: Псевдоэлемент ::first-line может применяться только к блочным элементам.
Следующие свойства относятся к псевдоэлементу ::first-line:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Обратите внимание на двойное двоеточие - ::first-line в сравнении с :first-line
Двойное двоеточие заменило запись с двоеточием для псевдоэлементов в CSS3. Это была попытка W3C провести различие между псевдо-классами и псевдоэлементами.
Синтаксис с одиночным двоеточием использовался для псевдо-классов и псевдоэлементов в CSS2 и CSS1.
Для обратной совместимости синтаксис с одним двоеточием приемлем для псевдоэлементов в CSS2 и CSS1.
Псевдоэлемент ::first-letter
Псевдоэлемент ::first-letter псевдоэлемент используется для добавления специального стиля к первой букве текста.
В следующем примере форматируется первая буква текста во всех элементах <p>
Примечание: Псевдоэлемент ::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:
В приведенном выше примере первая буква параграфа будет отображаться с 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>:
CSS псевдоэлемент - ::after
Псевдоэлемент ::after может использоваться для вставки некоторого содержимого после содержимого элемента.
В следующем примере вставляется изображение после содержимого каждого элемента <h1>:
CSS псевдоэлемент - ::marker
Псевдоэлемент ::marker выбирает маркеры элементов списка.
В следующем примере стили маркеров элементов списка:
CSS псевдоэлемент - ::selection
Псевдоэлемент ::selection соответствует части элемента, выбранной пользователем.
Следующие свойства CSS могут быть применены к ::selection:
color, background, cursor и outline.
В следующем примере выделенный текст становится красным на желтом фоне:
Проверьте себя с помощью упражнений!
Все 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 | Выбирает все посещенные ссылки |
