::first-letter¶
Псевдо-элемент ::first-letter
применяет стили к первой букве первой строки элемента уровня блока, но только тогда, когда не предшествует другой контент (например, изображения или встроенные таблицы).
Псевдо-элементы
- ::after
- ::backdrop
- ::before
::cue
- ::first-letter
- ::first-line
::grammar-error
::marker
::part()
- ::placeholder
- ::selection
::slotted()
::spelling-error
Синтаксис¶
/* Selects the first letter of a <p> */
p::first-letter {
font-size: 130%;
}
Значения¶
Первая буква элемента не всегда тривиальна для идентификации:
- Пунктуация, которая предшествует или сразу следует за первой буквой, включается в псевдоэлемент. Пунктуация включает любой символ Юникода, определенный в открытии (Ps), закрытии (Pe), начальной кавычки (Pi), финальной кавычки (Pf) и других классах пунктуации (Po).
- На некоторых языках есть орграфы, которые всегда капитализируются вместе, как IJ на голландском языке. В этих случаях обе буквы орграфа должны быть сопоставлены псевдоэлементом
::first-letter
(это плохо поддерживается браузерами). - Комбинация псевдо-элемента
::before
и свойстваcontent
может вводить некоторый текст в начале элемента. В этом случае::first-letter
будет соответствовать первой букве этого сгенерированного контента.
Только малый поднабор свойств CSS можно использовать с псевдоэлементом ::first-letter
:
- Свойства шрифта:
font
,font-style
,font-feature-settings
,font-kerning
,font-language-override
,font-stretch
,font-synthesis
,font-variant
,font-variant-alternates
,font-variant-caps
,font-variant-east-asian
,font-variant-ligatures
,font-variant-numeric
,font-variant-position
,font-weight
,font-size
,font-size-adjust
,line-height
иfont-family
- Свойства фона:
background
,background-color
,background-image
,background-clip
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
иbackground-blend-mode
- Свойства отступов:
margin
,margin-top
,margin-right
,margin-bottom
,margin-left
- Свойства полей:
padding
,padding-top
,padding-right
,padding-bottom
,padding-left
- Свойства рамок:
border
,border-style
,border-color
,border-width
,border-radius
,border-image
- Цвет
color
- Свойства
text-decoration
,text-shadow
,text-transform
,letter-spacing
,word-spacing
,line-height
,text-decoration-color
,text-decoration-line
,text-decoration-style
,box-shadow
,float
,vertical-align
Спецификации¶
- CSS Pseudo-Elements Level 4
- CSS Text Decoration Module Level 3
- Selectors Level 3
- CSS Level 2 (Revision 1)
- CSS Level 1
Поддержка браузерами¶
Пример¶
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>
p::first-letter {
color: red;
font-size: 130%;
}