::first-letterje psevdo element, ki vam omogoča oblikovanje prve črke v elementu, ne da bi vam bilo treba v HTML prilepiti oznako okoli te prve črke. Čeprav v DOM niso dodane nobene oznake, je videti, kot da je ciljna prva črka zajeta v oznaki. To prvo črko lahko oblikujete kot pravi element z:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Rezultat je tak, kot da bi imeli okoli prve črke faux element:
The first letter is bold and red.
Prva črka je krepko in rdeče
- Psevdo element deluje samo, če je nadrejeni element polje vsebnika bloka (z drugimi besedami, ne deluje na prvo črko
display: inline;elementov.) - Če imate element tako na elementu,
::first-letterkot::first-linena elementu, bo prva črka podedovala sloge prve vrstice, vendar bodo slogi na::first-lettervolji prepisani, ko bodo stili v sporu. - Če generirate vsebino z
::before, bo cilj prva črka ali ločila, ne glede na to, ali je del izvirnega besedilnega vozlišča ali ustvarjen z ustvarjeno vsebino.
Več informacij
- Kadar uporabljate kapice, uporabite skupaj s tem,
p:first-of-typeda ne bo vsaka prva črka oblikovana - Primer pisala - z ustvarjeno vsebino
- W3C Wiki
- Modul W3C CSS3 Selectors
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 9. | 3.5 | 9. | 12. | 5.1 |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3. | 5,0-5,1 |
Opomba: Za Internet Explorer 8 in starejše različice :first-letternamesto zapisa z dvopičjem uporabite eno dvopičje .