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;
}
Попробуйте сами »
Все 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 | Выбирает все посещенные ссылки |