Какие Псевдо-элементы?
CSS-псевдо-элемент используется для указания стиля частей элемента.
Например, он может быть использован для:
- Стиль первую букву, или линии, элемента
- Вставить содержимое до или после того, как, содержание элемента
Синтаксис
Синтаксис псевдо-элементов:
selector::pseudo-element {
property:value;
} | Обратите внимание на двойное обозначение Colon - ::first-line в сравнении :first-line Двойное двоеточие заменить обозначения одного двоеточия для псевдо-элементов в CSS3. Это была попытка от W3C различать псевдо-классов и псевдо-элементов. Синтаксис одной толстой кишки был использован как для псевдо-классов и псевдо-элементов в CSS2 и CSS1. Для обеспечения обратной совместимости синтаксис одного толстого кишечника является приемлемым для CSS2 и CSS1 псевдо-элементов. |
|---|
::first-line Псевдо-элемент
::first-line псевдо-элемент используется для добавления специального стиля к первой строке текста.
Следующий пример форматирует первую строку текста во всех <p> элементов:
Примечание: ::first-line псевдо-элемент может быть применен только к элементам уровня блока.
Следующие свойства применяются к ::first-line псевдо-элемента:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
::first-letter Псевдо-элемент
::first-letter псевдо-элемент используется для добавления специального стиля первой букве текста.
Следующий пример форматирует первую букву текста во всех <p> элементов:
Примечание: ::first-letter псевдо-элемент может быть применен только к элементам уровня блока.
Следующие свойства применяются к ::first-letter pseudo- элемента:
- font свойства
- color свойства
- background свойства
- margin свойства
- padding свойства
- border свойства
- text-decoration
- vertical-align (только если "float" является "none" )
- text-transform
- line-height
- float
- clear
Псевдо-элементы и CSS классы
Псевдо-элементы могут быть объединены с классами CSS:
В приведенном выше примере будет отображать первую букву пунктов с class="intro" , в красном и в большем размере.
Несколько Псевдоэлементы
Несколько псевдо-элементы также могут быть объединены.
В следующем примере, первая буква абзаца будет красным, в хх-большой размер шрифта. Остальная часть первой строки будет синим, а в капитель. Остальная часть пункта будет размер шрифта по умолчанию и цвет:
пример
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
} Попробуй сам " CSS - The ::before псевдоэлемент
::before того псевдо-элемент можно использовать для вставки некоторого содержимого перед содержимым элемента.
Следующий пример вставляет изображение перед содержимым каждого <h1> элемента:
CSS - The ::after того, как Псевдо-элемент
::after того, как псевдо-элемент можно использовать для вставки некоторого содержимого после содержимого элемента.
Следующий пример вставляет изображение после содержимого каждого <h1> элемента:
CSS - The ::selection Псевдо-элемент
::selection псевдо-элемента соответствует части элемента, выбранного пользователем.
Следующие свойства CSS могут быть применены к ::selection : color , background , cursor , и outline .
Следующий пример делает выбранный текст красным на желтом фоне:
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 »
Все 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> элемент со значением атрибута Ланг , начиная с "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" для "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 | Выбирает все посещенные ссылки |