Что такое псевдоэлементы?
Псевдоэлемент используется для оформления стиля указанной части элемента.
Например, он может быть использовано для:
- Оформления стиля первой буквы или линии элемента
- Вставки содержимого до или после элемента
Синтаксис псевдоэлементов
селектор ::псевдоэлемент {
свойство:значение;
}
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 | Выбирает все посещенные ссылки |