Den ::first-linepseudo-element er for bruk stiler for den første linje av et element. Se for deg et avsnitt som er flere linjer langt (som dette!). ::first-linelar deg style den første linjen med tekst. Du kan bruke den til å gjøre den større eller sette den i små bokstaver som et stilistisk valg. Mengden tekst som dette pseudoelementet målretter mot, avhenger av flere faktorer som linjelengde, visningsportbredde, skriftstørrelse, bokstavavstand, ordavstand. Så snart linjen brytes, blir ikke teksten etter det lenger valgt. Merk at det ikke er valgt noe faktisk DOM-element her (altså "pseudo" -element).
Denne pseudo-element fungerer bare på blokknivå elementer (når det displayer satt til enten block, inline-block, table-caption, table-cell). Hvis det er satt på et innebygd element, skjer ingenting, selv om det innebygde elementet har et linjeskift i seg.
Vær også oppmerksom på at ikke alle eiendommer kan brukes i et regelsett som inneholder ::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 offisielle CSS-spesifikasjonen forteller at brukeragenter kan tillate andre egenskaper hvis de føler for det:
UAer kan også bruke andre egenskaper.
Et ord angående spesifisitet
Følgende demo viser hvordan ::first-lineer i stand til å overstyre enhver form for spesifisitet, til og med !important.
- Den første paragrafen er satt til grå gjennom en merkevelger
- Den andre parapgrafen er satt til grå gjennom en klassevalg
- Den tredje parapgrafen er satt til grå gjennom en ID-velger
- Den fjerde parapgrafen er satt til grå gjennom en! Viktig bash
Dette er fordi pseudo-elementet behandles som et underordnet element, ikke bare en del av det overordnede elementet. Så reglene du bruker på det, er bare for det, foreldrereglene kan bare kaskade for det.
Prøv også å endre størrelsen på nettleseren din for å se hvordan du oppfører deg pseudo-elementet når visningsbredden endres.
Det er ingen: siste linje eller: nth-line, selv om det ville være kult.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Jepp | Jepp | Jepp | 3.5+ (gammel) 9+ | 5.5+ (gammel) 9+ | Jepp | Jepp |
Siden det ::first-lineer et pseudo-element, bør det være prefikset med to kolon som spesifisert i CSS2.1. Noen nettlesere støtter imidlertid bare syntaks med ett kolon (Internet Explorer 5.5 - 9 og Opera 3.5 - 9).