Andrea Baccolini, web designer, siti internet

Traduzione dell’articolo “How to Target First Line of Text in HTML Using CSS Only” del blog “Stanislav Kostadinov.” e dell’articolo ::first-line del blog “CSS TRICKS“

 
In questo post troverete il modo di selezionare e modificare solo la prima riga di testo usando il selettore CSS :first-line.

Nota: Il selettore “:first-line” può essere utilizzato solo con gli elementi a livello di blocco.

Se avete bisogno di indirizzare solo la prima riga di testo in HTML, è possibile utilizzare il selettore :first-line.

Ecco un semplice esempio di come utilizzarlo nel vostro file CSS:

p:first-line
{
color: red;
}

Il seguente codice seleziona qualsiasi paragrafo nel documento e applicherà il colore rosso solo per la prima riga di ogni paragrafo. Naturalmente, è possibile aggiungere un id o una classe al fine di indirizzare un elemento specifico del tuo sito web.

Quello che ho trovato essere interessante, però, è che non si può usare qualcosa come “p: last-line” se è necessario modificare lo stile dell’ultima riga di testo, simile al first-child/last-child o al first-of-type/last-of-type.

Questo pseudo-elemento funziona solo su elementi block-level (quando visualizzazione è impostata su block , inline-block , table-caption , table-cell ). Se impostato su un elemento inline, non succede niente, anche se tale elemento inline ha una interruzione di linea all’interno di esso.

Si noti inoltre che non tutte le proprietà possono essere utilizzate in un set di regole contenente ::first-line. Prevalentemente:

.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: ...
}

Qui potete trovare le specifiche W3C di questa pseudoclasse: LINK
 

SUPPORTO BROWSER

Traduzione dell’articolo “How to Target First Line of Text in HTML Using CSS Only” del blog “Stanislav Kostadinov.” e dell’articolo ::first-line del blog “CSS TRICKS“