::first-letter

Il pseudo-selettore ::first-letter permette di applicare uno stile specifico alla prima lettera di un elemento, senza doverla racchiudere in un elemento <span> nella sintassi HTML. Infatti con questo selettore, anche se non viene modificato in alcun modo il DOM, è come se la prima lettera in questione fosse inserita in un tag. Questo ci consente di conseguenza di applicare il nostro stile personalizzato a quella lettera, proprio come faremmo con un elemento.

p::first-letter {
  color: red;
  font-weight: bold;
}

Immaginando che questo codice CSS venga applicato ad un paragrafo reale, ecco come apparrebbe ai nostri occhi:

Questo è un paragrafo di esempio!

Note

Questo pseudo-elemento funziona solamente se l’elemento padre è un contenitore block, quindi non funzionerà sulla prima lettera degli elementi impostati con display: inline.

Se si applica sia ::first-letter che ::first-line ad un elemento, la prima lettera erediterà le regole di stile impostate per la prima riga, tuttavia queste regole verranno sovrascritte solamente se lo stile di ::first-letter è in conflitto esplicito.

I contenuti generati con ::before riceveranno lo stile applicato con ::first-line, proprio come se fossero contenuto integrante dell’elemento in questione.

Supporto dei Browser

[caniuse feature=”css-first-letter”]