::first-letterer et pseudo-element, der giver dig mulighed for at style det første bogstav i et element uden at skulle beholde et mærke omkring det første bogstav i din HTML. Mens der ikke føjes nogen tags til DOM, er det som om det målrettede første bogstav var omfattet af et tag. Du kan style det første bogstav, som du ville være et rigtigt element med:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Resultatet er som om du havde et faux-element omkring det første bogstav:
The first letter is bold and red.
Det første bogstav er fed og rødt
- Pseudo-elementet fungerer kun, hvis det overordnede element er en blokbeholderboks (med andre ord, det fungerer ikke på det første bogstav med
display: inline;elementer.) - Hvis du har både et
::first-letterog::first-lineet element, arver det første bogstav fra de første linjestil, men typografierne på::first-lettervil overskrive, når typografierne er i konflikt. - Hvis du genererer indhold med
::before, er det første bogstav eller tegnsætningstegn, uanset om det er en del af den originale tekstknude eller oprettet med genereret indhold.
Mere information
- Når du bruger drop-caps, skal du bruge det sammen,
p:first-of-typeså ikke hvert første bogstav bliver stylet - Eksempel på pen - med genereret indhold
- W3C Wiki
- W3C CSS3-vælgermodul
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5,0-5,1 |
Bemærk: For Internet Explorer 8 og derunder skal du bruge et enkelt kolon i :first-letterstedet for dobbelt kolon-notationen.