::first-lettereste un pseudoelement care vă permite să stilizați prima literă dintr-un element, fără a fi nevoie să lipiți o etichetă în jurul primei litere din HTML. Deși nu sunt adăugate etichete în DOM, este ca și cum prima literă vizată ar fi cuprinsă într-o etichetă. Puteți stiliza acea primă literă așa cum ați face un element real cu:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Rezultatul este ca și cum ai avea un element fals în jurul primei litere:
The first letter is bold and red.
Prima literă este îngroșată și roșie
- Pseudoelementul funcționează numai dacă elementul părinte este o cutie de blocare a containerului (cu alte cuvinte, nu funcționează pe prima literă a
display: inline;elementelor.) - Dacă aveți atât un element, cât
::first-letterși::first-lineun element, prima literă va moșteni stilurile din prima linie, dar stilurile de pe acesta se::first-lettervor suprascrie atunci când stilurile vor intra în conflict. - Dacă generați conținut cu
::before, prima literă sau caracterul de punctuație, fie că face parte din nodul textului original sau este creat cu conținut generat, va fi ținta.
Mai multe informatii
- Când se utilizează pentru majuscule, utilizați împreună cu
p:first-of-typeastfel încât nu fiecare primă literă să fie stilată - Exemplu stilou - cu conținut generat
- W3C Wiki
- Modulul W3C CSS3 Selectors
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 3 | 5.0-5.1 |
Notă: Pentru Internet Explorer 8 și versiuni ulterioare, utilizați un singur punct :first-letterîn locul notării cu două puncte.