::first-line-Elementul pseudo este pentru aplicarea stiluri de la prima linie a unui element. Imaginați-vă un paragraf care are mai multe rânduri (ca acesta!). ::first-linevă permite să stilizați prima linie de text. Puteți să-l utilizați pentru a-l face mai mare sau să-l setați cu majuscule mici ca o alegere stilistică. Cantitatea de text vizată de acest pseudo-element depinde de mai mulți factori, cum ar fi lungimea liniei, lățimea ferestrei, dimensiunea fontului, spațierea literelor, spațierea cuvintelor. De îndată ce linia se întrerupe, textul ulterior nu mai este selectat. Rețineți că nu este selectat aici niciun element DOM real (deci element „pseudo”).
Acest element pseudo funcționează doar pe elemente de nivel bloc (atunci când displayeste setat la block, inline-block, table-caption, table-cell). Dacă este setat pe un element inline, nu se întâmplă nimic, chiar dacă acel element inline are o pauză de linie în interiorul său.
De asemenea, rețineți că nu toate proprietățile pot fi utilizate într-un set de reguli care conține ::first-line. Mai ales:
.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )Specificația oficială CSS spune că agenții utilizatorilor pot permite alte proprietăți dacă le place:
UA-urile pot aplica și alte proprietăți.
Un cuvânt referitor la specificitate
Următoarea demonstrație arată cum ::first-lineeste capabil să suprascrie orice fel de specificitate, chiar !important.
- Primul parapgraf este setat la gri printr-un selector de etichete
- Al doilea parapgraf este setat la gri printr-un selector de clasă
- Al treilea parapgraf este setat la gri printr-un selector ID
- Al patrulea parapgraf este setat la gri printr-un! Bash important
Acest lucru se datorează faptului că pseudo-elementul este tratat ca un element copil, nu doar ca o parte a elementului părinte. Deci, regulile pe care i le aplicați sunt doar pentru aceasta, regulile părinte pot fi în cascadă.
De asemenea, încercați să redimensionați browserul pentru a vedea cum se comportă pseudo-elementul când se modifică lățimea ferestrei.
Nu există: ultima linie sau: a n-a linie, chiar dacă ar fi grozav.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Da | Da | Da | 3.5+ (vechi) 9+ | 5.5+ (vechi) 9+ | Da | Da |
Deoarece ::first-lineeste un pseudo-element, acesta ar trebui să fie prefixat cu două puncte după cum se specifică în CSS2.1. Cu toate acestea, unele browsere acceptă doar sintaxa cu un singur punct (Internet Explorer 5.5 - 9 și Opera 3.5 - 9).