::first-letterer et pseudo-element som lar deg utforme den første bokstaven i et element, uten å måtte stikke en merkelapp rundt den første bokstaven i HTML-en. Selv om det ikke er lagt til noen koder i DOM, er det som om den målrettede første bokstaven var omfattet av en kode. Du kan style den første bokstaven som du ville gjort et ekte element med:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Resultatet er som om du hadde et faux-element rundt første bokstav:
The first letter is bold and red.
Den første bokstaven er fet og rød
- Pseudo-elementet fungerer bare hvis det overordnede elementet er en boks for blokkbeholdere (med andre ord, det fungerer ikke på første bokstav med
display: inline;elementer.) - Hvis du har både a
::first-letterog::first-linepå et element, vil den første bokstaven arve fra første linjestiler, men stiler på::first-lettervil overskrive når stilene kommer i konflikt. - Hvis du genererer innhold med
::before, vil det være første bokstav eller tegnsettingstegn, enten det er en del av den opprinnelige tekstnoden eller opprettet med generert innhold.
Mer informasjon
- Når du bruker drop-caps, bruk den sammen med
p:first-of-typeså ikke hver første bokstav blir stylet - Eksempel på penn - med generert innhold
- W3C Wiki
- W3C CSS3 velgermodul
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5,0-5,1 |
Merk: For Internet Explorer 8 og nedover, bruk et enkelt kolon i :first-letterstedet for dobbelt kolon.