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

Il numero indica la versione minima del browser in cui la feature sia supportata. Per ottenere maggiori informazioni, passare con il mouse sopra la versione.

Desktop

chrome
Google Chrome
9
firefox
Mozilla Firefox
3.5
ie
Internet Explorer
9
edge
Microsoft Edge
12
opera
Opera
11
safari
Apple Safari
5.1

Mobile / Tablet

and_chr
Android Chrome
104
and_ff
Android Firefox
101
android
Android
3
samsung
Samsung Internet
4
op_mob
Opera Mobile
12
ios_saf
iOS Safari
5.0

Queste statistiche sul supporto da parte dei browser provengono da Caniuse, che potete visitare per informazioni più dettagliate.