::first-letterär ett pseudoelement som låter dig utforma den första bokstaven i ett element utan att behöva sticka en tagg runt den första bokstaven i din HTML. Även om inga taggar läggs till i DOM, är det som om den riktade första bokstaven omfattades av en tagg. Du kan utforma den första bokstaven som du skulle göra ett riktigt element med:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Resultatet är som om du hade ett fauxelement runt första bokstaven:
The first letter is bold and red.
Den första bokstaven är fet och röd
- Pseudoelementet fungerar bara om det överordnade elementet är en blockbehållarbox (med andra ord fungerar det inte på den första bokstaven med
display: inline;element.) - Om du har både a
::first-letteroch::first-lineett element kommer den första bokstaven att ärva från de första radstilarna, men stilarna på::first-letterskrivs över när stilar är i konflikt. - Om du genererar innehåll med
::beforekommer första bokstaven eller skiljetecknet att vara målet, oavsett om det är en del av den ursprungliga textnoden eller skapas med genererat innehåll.
Mer information
- När du använder för drop-caps, använd i kombination med
p:first-of-typeså att inte varje första bokstav blir stylad - Exempel på penna - med genererat innehåll
- W3C Wiki
- W3C CSS3 väljarmodul
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5,0-5,1 |
Obs! För Internet Explorer 8 och nedåt använder du en enda kolon :first-letteristället för dubbelpunktnotationen.