::first-letteris een pseudo-element waarmee je de eerste letter van een element kunt opmaken, zonder dat je een tag rond die eerste letter in je HTML hoeft te plakken. Hoewel er geen tags aan de DOM worden toegevoegd, is het alsof de beoogde eerste letter in een tag is opgenomen. Je kunt die eerste letter opmaken zoals je een echt element zou doen met:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Het resultaat is alsof je een nep-element rond de eerste letter hebt:
The first letter is bold and red.
De eerste letter is vetgedrukt en rood
- Het pseudo-element werkt alleen als het bovenliggende element een blokcontainerbox is (met andere woorden, het werkt niet op de eerste letter van
display: inline;elementen.) - Als je zowel een
::first-letterals::first-lineeen element hebt, zal de eerste letter erven van de eerste regelstijlen, maar stijlen op de::first-letterzullen overschrijven wanneer stijlen conflicteren. - Als u inhoud genereert met
::before, is de eerste letter of het leesteken, of deze nu deel uitmaakt van het oorspronkelijke tekstknooppunt of gemaakt met gegenereerde inhoud, het doelwit.
Meer informatie
- Bij gebruik voor drop-caps, in combinatie met gebruiken,
p:first-of-typezodat niet elke eerste letter wordt gestileerd - Voorbeeldpen - met gegenereerde inhoud
- W3C Wiki
- W3C CSS3-keuzemodule
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5.0-5.1 |
Opmerking: gebruik voor Internet Explorer 8 en lager een enkele dubbele punt in :first-letterplaats van de dubbele dubbele punt.