::first-linePseudo-elementti on käyttää tyylejä ensimmäinen rivi elementin. Kuvittele kappale, joka on useita rivejä pitkä (kuten tämä!). ::first-linevoit muotoilla ensimmäisen tekstirivin. Voit käyttää sitä tekemään siitä suuremman tai asettaa sen pienikokoisiksi tyylilliseksi valinnaksi. Tämän pseudoelementin kohteena olevan tekstin määrä riippuu useista tekijöistä, kuten rivin pituudesta, näkymän leveydestä, kirjasinkokosta, kirjainten välistä, sanavälistä. Heti kun rivi katkeaa, sen jälkeistä tekstiä ei enää valita. Huomaa, että tässä ei ole valittuna varsinaista DOM-elementtiä (siis "pseudo" -elementti).
Tämän pseudo-elementti toimii vain lohkoelementeille (kun displayon asetettu joko block, inline-block, table-caption, table-cell). Jos se asetetaan inline-elementille, mitään ei tapahdu, vaikka kyseisessä inline-elementissä olisi rivinvaihto.
Huomaa myös, että kaikkia ominaisuuksia ei voida käyttää säännössä, joka sisältää ::first-line. Enimmäkseen:
.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:… )Virallisessa CSS-määrityksessä kerrotaan, että käyttäjäagentit voivat sallia muita ominaisuuksia, jos he haluavat sen:
Arabiemiirikunnat voivat soveltaa myös muita ominaisuuksia.
Sana erityisyydestä
Seuraava demo osoittaa, kuinka ::first-linese pystyy ohittamaan kaikenlaisen spesifisyyden, jopa !important.
- Ensimmäinen piirtoarvo asetetaan harmaaksi tagin valitsimen kautta
- 2. piirustuskuva on asetettu harmaaksi luokan valitsimen kautta
- 3. piirustuskuva on asetettu harmaaksi ID-valitsimen avulla
- Neljäs piirustuskuva on asetettu harmaaksi! Tärkeän bashin kautta
Tämä johtuu siitä, että pseudoelementtiä kohdellaan kuin lapsielementtiä, ei vain osa vanhemman elementtiä. Joten siihen soveltamasi säännöt ovat vain sitä varten, vanhempien säännöt saattavat vain kaskadtua siihen.
Yritä myös muuttaa selaimesi kokoa nähdäksesi, miten pseudoelementti käyttäytyy, kun näkymän leveys muuttuu.
Ei ole: viimeinen rivi tai: n. Rivi, vaikka se olisi siistiä.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Jep | Jep | Jep | 3,5+ (vanha) 9+ | 5,5+ (vanha) 9+ | Jep | Jep |
Koska ::first-linese on pseudoelementti, sen tulisi olla etuliitettynä kahdella kaksoispisteellä CSS2.1: n mukaisesti. Jotkin selaimet tukevat kuitenkin vain yhden kaksoispisteen syntaksia (Internet Explorer 5.5 - 9 ja Opera 3.5 - 9).