Het ::first-linepseudo-element is voor het toepassen van stijlen op de eerste regel van een element. Stel je een alinea voor die meerdere regels lang is (zoals deze!). ::first-linestelt u in staat om die eerste regel tekst op te maken. Je zou het kunnen gebruiken om het groter te maken of het in small-caps kunnen zetten als een stilistische keuze. De hoeveelheid tekst waarop dit pseudo-element gericht is, hangt af van de verschillende factoren, zoals de lengte van de regel, de breedte van de viewport, de lettergrootte, de letterafstand en de woordafstand. Zodra de regel breekt, wordt de tekst daarna niet meer geselecteerd. Merk op dat hier geen feitelijk DOM-element wordt geselecteerd (dus "pseudo" -element).
Dit pseudo-element werkt alleen op blokelementen (bij displayhetzij ingesteld block, inline-block, table-caption, table-cell). Indien ingesteld op een inline-element, gebeurt er niets, zelfs niet als dat inline-element een regeleinde bevat.
Merk ook op dat niet alle eigenschappen kunnen worden gebruikt in een regelset die ::first-line. Meestal:
.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:… )Volgens de officiële CSS-specificatie kunnen gebruikersagenten andere eigenschappen toestaan als ze daar zin in hebben:
UA's kunnen ook andere eigenschappen toepassen.
Een woord over specificiteit
De volgende demo laat zien hoe ::first-lineelke specificiteit kan worden overschreven, zelfs !important.
- De eerste parapgraaf wordt grijs ingesteld via een tag-selector
- De 2e parapgraaf wordt grijs ingesteld via een klassenselector
- De derde parapgraaf wordt grijs ingesteld via een ID-selector
- De 4e parapgraaf wordt grijs gezet door een! Belangrijke bash
Dit komt doordat het pseudo-element wordt behandeld als een kindelement, niet alleen als een deel van het ouderelement. Dus de regels die u erop toepast, zijn er alleen voor, de bovenliggende regels kunnen er gewoon naar toe stromen.
Probeer ook het formaat van uw browser aan te passen om te zien hoe het pseudo-element zich gedraagt wanneer de breedte van de viewport verandert.
Er is geen: laatste regel of: n-de regel, ook al zou dat cool zijn.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | 3.5+ (oud) 9+ | 5.5+ (oud) 9+ | Ja | Ja |
Aangezien het ::first-lineeen pseudo-element is, moet het worden voorafgegaan door twee dubbele punten, zoals gespecificeerd in CSS2.1. Sommige browsers ondersteunen echter alleen de syntaxis met één dubbele punt (Internet Explorer 5.5 - 9 en Opera 3.5 - 9).