::first-linePsevdoelement je za uporabo slogov v prvi vrstici elementa. Predstavljajte si odstavek, ki je dolg več vrstic (kot je ta!). ::first-lineomogoča oblikovanje prve vrstice besedila. Uporabite ga lahko, da ga povečate, ali pa ga kot stilsko izbiro nastavite v majhne kapice. Količina besedila, na katerega cilja ta psevdo-element, je odvisna od številnih dejavnikov, kot so dolžina vrstice, širina vidnega polja, velikost pisave, razmik med črkami in razmik med besedami. Takoj, ko se vrstica prelomi, besedilo za tem ni več izbrano. Upoštevajte, da tukaj ni izbran dejanski element DOM (torej "psevdo" element).
Ta psevdoelement deluje samo na elemente na ravni blokov (ko displayje bodisi naj bi block, inline-block, table-caption, table-cell). Če je nastavljen na elementu v vrstici, se nič ne zgodi, tudi če ima element v vrstici prelom vrstice.
Upoštevajte tudi, da v naboru pravil, ki vsebujejo, ni mogoče uporabiti vseh lastnosti ::first-line. Večinoma:
.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:… )Uradna specifikacija CSS sporoča, da lahko uporabniški agenti dovolijo druge lastnosti, če se jim zdi:
UA lahko uporabljajo tudi druge lastnosti.
Beseda glede specifičnosti
Naslednja predstavitev prikazuje, kako ::first-linelahko preglasi kakršno koli specifičnost, tudi !important.
- 1. odstavek je nastavljen na sivo s pomočjo izbirnika oznak
- 2. odstavek je nastavljen na sivo s pomočjo izbirnika razreda
- Tretji odstavek je nastavljen na sivo s pomočjo izbirnika ID
- Četrti odstavek je nastavljen na sivo skozi! Pomemben bash
To je zato, ker se psevdoelement obravnava kot podrejeni element, ne le kot del nadrejenega elementa. Pravila, ki jih uporabljate zanj, so torej samo zanjo, nadrejena pravila se lahko samo kaskadirajo.
Poskusite tudi spremeniti velikost brskalnika, da vidite, kako se obnaša psevdoelement, ko se spremeni širina vidnega polja.
Ni: last-line ali: nth-line, čeprav bi bilo to v redu.
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | 3,5+ (stare) 9+ | 5,5+ (staro) 9+ | Ja | Ja |
Ker ::first-lineje psevdoelement, bi moral imeti predpiško dva dvopičja, kot je določeno v CSS2.1. Vendar nekateri brskalniki podpirajo samo sintakso z enim dvopičjem (Internet Explorer 5.5 - 9 in Opera 3.5 - 9).