::first-linePseudo-element za primjene stilova na prvoj liniji elementa. Zamislite odlomak dug nekoliko redaka (poput ovog!). ::first-lineomogućuje vam oblikovanje tog prvog retka teksta. Možete ga koristiti za povećanje ili ga postaviti u male kapice kao stilski izbor. Količina teksta koji cilja ovaj pseudo-element ovisi o nekoliko čimbenika kao što su duljina retka, širina okvira za prikaz, veličina fonta, razmak slova, razmak riječi. Čim se redak prekine, tekst nakon toga više nije odabran. Imajte na umu da ovdje nije odabran stvarni DOM element (dakle "pseudo" element).
Ova pseudo-element koji radi samo o elementima blok razini (kada displayje postavljen na bilo block, inline-block, table-caption, table-cell). Ako se postavi na umetnuti element, ništa se neće dogoditi, čak i ako taj ugrađeni element ima prelom retka u sebi.
Također imajte na umu da se sva svojstva ne mogu koristiti u skupu pravila koja sadrže ::first-line. Uglavnom:
.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:… )Službena CSS specifikacija kaže Korisničkim agentima da mogu dopustiti druga svojstva ako im se to sviđa:
UA mogu primijeniti i druga svojstva.
Riječ o specifičnosti
Sljedeća demonstracija pokazuje kako ::first-linemože nadjačati bilo koju vrstu specifičnosti, čak !important.
- 1. paragraf postavljen je na sivu boju pomoću birača oznaka
- 2. paragraf postavljen je na sivo kroz birač razreda
- Treći je paragraf postavljen na sivu boju pomoću birača ID-a
- Četvrti paragraf postavljen je na sivo kroz! Važan udarac
To je zato što se pseudo-element tretira kao podređeni element, a ne samo kao dio nadređenog elementa. Dakle, pravila koja na njih primjenjujete samo su za to, nadređena pravila mogu se na njih spustiti.
Također, pokušajte promijeniti veličinu preglednika da biste vidjeli kako se ponaša pseudo-element kada se promijeni širina okvira za prikaz.
Ne postoji: last-line ili: nth-line, iako bi to bilo cool.
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Da | Da | Da | 3,5+ (stari) 9+ | 5,5+ (staro) 9+ | Da | Da |
Budući da ::first-lineje pseudo-element, prefiksu bi mu trebala biti dva dvotačka kako je navedeno u CSS2.1. Međutim, neki preglednici podržavaju samo sintaksu s jednim dvotočkom (Internet Explorer 5.5 - 9 i Opera 3.5 - 9).