Den ::first-linepseudo elementet är för applicering stilar till den första raden i ett element. Föreställ dig ett stycke som är flera rader (som det här!). ::first-linelåter dig utforma den första raden med text. Du kan använda den för att göra den större eller sätta den i små bokstäver som ett stilistiskt val. Mängden text som detta pseudoelement riktar sig till beror på flera faktorer som linjelängd, visningsbredd, teckenstorlek, bokstavsavstånd, ordavstånd. Så snart raden bryts markeras inte längre texten efter det. Observera att det inte finns något aktuellt DOM-element som väljs här (alltså "pseudo" -element).
Denna pseudo elementet fungerar bara på blockelement (då displayär inställd på antingen block, inline-block, table-caption, table-cell). Om den är inställd på ett inbyggt element händer ingenting, även om det inbyggda elementet har en radbrytning inom sig.
Observera också att inte alla egenskaper kan användas i en regleruppsättning som innehåller ::first-line. För det mesta:
.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 officiella CSS-specifikationen säger att användaragenter kan tillåta andra egenskaper om de känner för det:
UA kan också använda andra egenskaper.
Ett ord om specificitet
Följande demo visar hur man ::first-linekan åsidosätta alla typer av specificitet, även !important.
- Den första paragrafen är satt till grå genom en taggväljare
- Det andra parapgraphet är satt till grått genom en klassväljare
- Den tredje paragrafen är satt till grå genom en ID-väljare
- Den fjärde bildskärmen är satt till grå genom en! Viktig bash
Detta beror på att pseudoelementet behandlas som ett underordnat element, inte bara en del av det överordnade elementet. Så de regler du tillämpar på det är bara för det, föräldrarnas regler kan bara kaskadas för det.
Försök också att ändra storlek på din webbläsare för att se hur du beter pseudo-elementet när visningsbredden ändras.
Det finns ingen: sista raden eller: nth-raden, även om det skulle vara coolt.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Japp | Japp | Japp | 3.5+ (gammal) 9+ | 5.5+ (gammal) 9+ | Japp | Japp |
Eftersom det ::first-lineär ett pseudo-element, bör det föregås av två kolon som anges i CSS2.1. Vissa webbläsare stöder dock bara syntaxen med en kolon (Internet Explorer 5.5 - 9 och Opera 3.5 - 9).