Den ::first-linepseudo-element er til påføring stilarter til den første linje af et element. Forestil dig et afsnit, der er flere linjer langt (som dette!). ::first-linegiver dig mulighed for at style den første tekstlinje. Du kan bruge den til at gøre den større eller sætte den i små bogstaver som et stilistisk valg. Mængden af tekst, der er målrettet mod dette pseudo-element, afhænger af de forskellige faktorer som linjelængde, visningsportbredde, skriftstørrelse, bogstavafstand, ordafstand. Så snart linjen går i stykker, markeres teksten derefter ikke længere. Bemærk, at der ikke er valgt noget faktisk DOM-element her (altså "pseudo" -element).
Denne pseudo-element fungerer kun på blok-niveau elementer (når displayer indstillet til enten block, inline-block, table-caption, table-cell). Hvis indstillet på et indbygget element, sker der intet, selvom det indbyggede element har et linjeskift i sig.
Bemærk også, at ikke alle egenskaber kan bruges i et regelsæt, der indeholder ::first-line. For det meste:
.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:… )Den officielle CSS-specifikation fortæller, at brugeragenter kan tillade andre egenskaber, hvis de har lyst til det:
UA'er kan også anvende andre egenskaber.
Et ord om specificitet
Den følgende demo viser, hvordan det ::first-lineer i stand til at tilsidesætte enhver form for specificitet, selv !important.
- Den første parapgraf er indstillet til grå gennem en tagvælger
- Den anden parapgraf er indstillet til grå gennem en klassevælger
- Den tredje parapgraf er indstillet til grå gennem en ID-vælger
- Den 4. parapgraf er indstillet til grå gennem en! Vigtig bash
Dette skyldes, at pseudo-elementet behandles som et underordnet element, ikke kun en del af det overordnede element. Så de regler, du anvender på det, er kun for det, forældrereglerne kan bare kaskade til det.
Prøv også at ændre størrelsen på din browser for at se, hvordan man opfører sig pseudo-elementet, når visningsbredden ændres.
Der er ingen: sidste linje eller: n-linje, selvom det ville være sejt.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | 3.5+ (gammel) 9+ | 5.5+ (gammel) 9+ | Ja | Ja |
Da det ::first-lineer et pseudo-element, skal det være forud for to kolon som specificeret i CSS2.1. Imidlertid understøtter nogle browsere kun syntaks med en kolon (Internet Explorer 5.5 - 9 og Opera 3.5 - 9).