::first-linePseudo-prvok je určený na použitie štýlov na prvý riadok prvku. Predstavte si odsek, ktorý má niekoľko riadkov (napríklad tento!). ::first-lineumožňuje upraviť štýl prvého riadku textu. Môžete ho použiť na zväčšenie alebo ako štýlovú voľbu vloženú do malých písmen. Množstvo textu zameraného týmto pseudoprvkom závisí od niekoľkých faktorov, ako je dĺžka riadku, šírka výrezu, veľkosť písma, medzery medzi písmenami, medzery medzi slovami. Len čo sa riadok zalomí, text po ňom sa už nebude vyberať. Upozorňujeme, že tu nie je vybratý žiadny skutočný prvok DOM (teda „pseudo“ prvok).
Tento pseudo-prvok pracuje len na blokových elementov (ak displayje nastavené buď na block, inline-block, table-caption, table-cell). Ak je nastavený na vloženom prvku, nič sa nestane, aj keď má tento vložený prvok zalomenie riadku.
Upozorňujeme tiež, že nie všetky vlastnosti je možné použiť v sade pravidiel, ktorá obsahuje ::first-line. Väčšinou:
.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:… )Oficiálna špecifikácia CSS hovorí, že agenti používateľov môžu povoliť ďalšie vlastnosti, ak sa im to páči:
UA môžu uplatňovať aj ďalšie vlastnosti.
Slovo týkajúce sa konkrétnosti
Nasledujúca ukážka ukazuje, ako ::first-lineje možné prekonať akýkoľvek druh špecifickosti !important.
- Prvý parapgraf je nastavený na sivú farbu pomocou selektora značiek
- Druhý parapgraf je nastavený na sivú farbu pomocou selektora triedy
- Tretí parapgraf je nastavený na sivú farbu pomocou selektora ID
- Štvrtý parapgraf je nastavený na sivú cez! Dôležitý bash
Je to tak preto, lebo s pseudoelementom sa zaobchádza ako s podradeným elementom, nielen s časťou nadradeného elementu. Pravidlá, ktoré na ňu uplatníte, sú teda iba pre ňu, pravidlá rodiča sa k nej môžu kaskádovať.
Skúste tiež zmeniť veľkosť prehliadača a zistite, ako sa chová pseudoelement pri zmene šírky výrezu.
Neexistuje žiadny: posledný riadok alebo: n-tý riadok, aj keď by to bolo super.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Áno | Áno | Áno | 3,5+ (staré) 9+ | 5,5+ (staré) 9+ | Áno | Áno |
Pretože ::first-lineje to pseudoelement, mali by mať pred ním dve dvojbodky, ako je uvedené v CSS2.1. Niektoré prehliadače však podporujú iba syntax dvojbodiek (Internet Explorer 5.5 - 9 a Opera 3.5 - 9).