::first-linePseudo-element on taotlemise stiile esimene rida element. Kujutage ette lõiku, mis on mitu rida pikk (nagu see!). ::first-linevõimaldab teil kujundada selle esimese tekstirea. Stiilse valikuna võite seda kasutada suuremaks muutmiseks või väikeste suurtähtedega. Selle pseudoelemendi sihitud teksti hulk sõltub mitmest tegurist, näiteks joone pikkusest, vaateava laiusest, fondi suurusest, tähemärgist, sõnade kaugusest. Niipea kui rida katkeb, ei ole pärast seda teksti enam valitud. Pange tähele, et siin pole valitud ühtegi tegelikku DOM-elementi (seega „pseudo” -elementi).
See pseudo-element töötab ainult ploki taseme elemendid (kui displayon seatud kas block, inline-block, table-caption, table-cell). Kui see on sisemisele elemendile seatud, ei juhtu midagi, isegi kui selle sees oleva elemendi sees on joone katkemine.
Pange tähele ka seda, et kõiki atribuute ei saa kasutada reeglipaketis, mis sisaldab ::first-line. Enamasti:
.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:… )Ametlik CSS-spetsifikatsioon ütleb, et kasutajaagendid saavad lubada muid atribuute, kui nad seda soovivad:
UA-d võivad rakendada ka muid omadusi.
Sõna konkreetsuse kohta
Järgmine demo näitab, kuidas ::first-lineon võimalik isegi igasugust spetsiifikat alistada !important.
- 1. parafgraaf on märgendi valija abil hall
- Klassi valija abil määratakse 2. parafgraaf halliks
- 3. parafgraaf on ID-valija abil hall
- 4. parafgraaf on seatud halli! Olulise bashi kaudu
Seda seetõttu, et pseudoelementi koheldakse kui algelementi, mitte ainult osa vanemelemendist. Nii et reeglid, mida sellele rakendate, on just selle jaoks, vanemreeglid võivad selle juurde lihtsalt astuda.
Proovige ka brauseri suurust muuta, et näha, kuidas pseudoelement käitub, kui vaateava laius muutub.
Puudub: viimane rida ega: n-rida, kuigi see oleks lahe.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Jah | Jah | Jah | 3,5+ (vana) 9+ | 5,5+ (vana) 9+ | Jah | Jah |
Kuna tegemist ::first-lineon pseudoelemendiga, peaks see olema CSS2.1-s täpsustatud kahe kooloni ees. Kuid mõned brauserid toetavad ainult ühe kooloni süntaksit (Internet Explorer 5.5–9 ja Opera 3.5–9).