Lo ::first-linepseudo-elemento serve per applicare gli stili alla prima riga di un elemento. Immagina un paragrafo lungo diverse righe (come questo!). ::first-lineti consente di definire lo stile della prima riga di testo. Potresti usarlo per ingrandirlo o impostarlo in maiuscolo come scelta stilistica. La quantità di testo targetizzata da questo pseudo-elemento dipende da diversi fattori come la lunghezza della riga, la larghezza della finestra, la dimensione del carattere, la spaziatura delle lettere, la spaziatura delle parole. Non appena la riga si interrompe, il testo successivo non è più selezionato. Notare che qui non è selezionato alcun elemento DOM effettivo (quindi elemento "pseudo").
Questo pseudo-elemento funziona solo su elementi a livello di blocco (quando displayè impostato a uno block, inline-block, table-caption, table-cell). Se impostato su un elemento inline, non accade nulla, anche se quell'elemento inline ha un'interruzione di riga al suo interno.
Si noti inoltre che non tutte le proprietà possono essere utilizzate in un set di regole contenente ::first-line. Soprattutto:
.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:… )La specifica CSS ufficiale dice che gli agenti utente possono consentire altre proprietà se ne hanno voglia:
Gli UA possono applicare anche altre proprietà.
Una parola sulla specificità
La seguente demo mostra come ::first-linesia in grado di ignorare qualsiasi tipo di specificità, anche !important.
- Il primo parapgrafo è impostato su grigio tramite un selettore di tag
- Il 2 ° parapgrafo è impostato su grigio tramite un selettore di classe
- Il 3 ° parapgrafo è impostato su grigio tramite un selettore ID
- Il 4 ° parapgrafo diventa grigio dopo un! Importante bash
Questo perché lo pseudo-elemento viene trattato come un elemento figlio, non solo una parte dell'elemento genitore. Quindi le regole che applichi ad esso sono solo per esso, le regole genitore potrebbero semplicemente ricadere su di esso.
Inoltre, prova a ridimensionare il browser per vedere come si comporta lo pseudo-elemento quando cambia la larghezza del viewport.
Non ci sono: ultima riga o: ennesima riga, anche se sarebbe bello.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Sì | Sì | Sì | 3.5+ (vecchio) 9+ | 5.5+ (vecchio) 9+ | Sì | Sì |
Poiché ::first-lineè uno pseudo-elemento, dovrebbe essere preceduto da due due punti come specificato in CSS2.1. Tuttavia, alcuni browser supportano solo la sintassi a due punti (Internet Explorer 5.5 - 9 e Opera 3.5 - 9).