::first-letterje pseudo element koji vam omogućuje oblikovanje prvog slova u elementu, bez potrebe za lijepljenjem oznake oko tog prvog slova u vašem HTML-u. Iako se u DOM ne dodaju nikakve oznake, čini se da je ciljano prvo slovo obuhvaćeno oznakom. To prvo slovo možete oblikovati kao pravi element pomoću:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Rezultat je kao da imate faux element oko prvog slova:
The first letter is bold and red.
Prvo slovo je podebljano i crveno
- Pseudo element djeluje samo ako je nadređeni element okvir spremnika blokova (drugim riječima, ne radi na prvom slovu
display: inline;elemenata.) - Ako imate
::first-letteri::first-lineelement i element, i prvo slovo naslijedit će se iz stilova prvog retka, ali stilovi na::first-lettervolji prepisat će se kada se stilovi sukobe. - Ako generirate sadržaj s
::before, cilj će biti prvo slovo ili interpunkcijski znak, bilo da je dio izvornog čvora teksta ili stvoren s generiranim sadržajem.
Više informacija
- Kad se koristi za kapice, koristite zajedno s,
p:first-of-typetako da se svako prvo slovo ne stilizira - Primjer olovke - s generiranim sadržajem
- W3C Wiki
- W3C CSS3 modul za odabir
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5,0-5,1 |
Napomena: Za Internet Explorer 8 i starije verzije, koristite dvotačku :first-letterumjesto dvostruke dvotačke.