CSS ::first-letter Pseudo-elemento

Lo pseudo-elemento ::first-letter applica stili alla prima lettera della prima riga di un contenitore a livello di blocco. Viene utilizzato più comunemente per creare capolettera e altri effetti tipografici sulla lettera iniziale, come le grandi lettere ornate che aprono un capitolo in un libro stampato.

Lo pseudo-elemento ha effetto solo quando la proprietà display dell'elemento è block, inline-block, list-item, table-cell o table-caption. Non ha effetto sugli elementi inline come <span> o le immagini, poiché non iniziano una nuova riga.

Quando la punteggiatura (come virgolette, parentesi o un trattino) precede o segue immediatamente la prima lettera, tale punteggiatura viene inclusa nella corrispondenza insieme alla lettera. Lo pseudo-elemento individua la prima unità tipografica di lettera, quindi un simbolo o una cifra iniziale viene stilizzato insieme alla lettera che lo segue.

Informazione

CSS3 ha introdotto la sintassi con doppio due punti (::first-letter) per distinguere gli pseudo-elementi dalle pseudo-classi. La forma precedente con singolo due punti (:first-letter) è ancora accettata dai browser per compatibilità con le versioni precedenti, ma la forma con doppio due punti è preferita nel codice moderno.

Quando usarlo

Utilizza ::first-letter quando vuoi:

Creare un capolettera — ingrandire e far fluttuare la lettera iniziale di un articolo o capitolo.
Applicare un colore, font o peso distinto al carattere iniziale di un'intestazione o paragrafo.
Riprodurre una tipografia in stile stampa sul web senza dover avvolgere il primo carattere in markup aggiuntivo.

Poiché l'effetto è puramente presentazionale, mantiene il tuo HTML pulito: non è necessario aggiungere un <span class="first"> attorno alla lettera.

Proprietà consentite

Ecco le proprietà CSS che possono essere utilizzate con lo pseudo-elemento ::first-letter:

Proprietà dei font: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-weight, font-size, font-size-adjust, line-height e font-family.

Proprietà dello sfondo: background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image e background-clip.

Proprietà del margine: margin, margin-top, margin-right, margin-bottom, margin-left.

Proprietà del padding: padding, padding-top, padding-right, padding-bottom, padding-left.

Proprietà del bordo: abbreviazioni, border-style, border-color, border-width, border-radius, border-image, forme estese.

La proprietà color.

Le proprietà text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (quando appropriato), text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (solo float: none;).

Versione

Selectors Level 3

CSS Level 2 (Revision 1)

CSS Level 1

Sintassi

Esempio di sintassi CSS ::first-letter

::first-letter {
  css declarations;
}

Esempio dello pseudo-elemento ::first-letter:

Esempio di codice CSS ::first-letter

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Provalo tu stesso »

Risultato

La prima lettera del paragrafo viene visualizzata a 35px e in blu, mentre il resto del testo mantiene le dimensioni e il colore predefiniti.

Esempio dello pseudo-elemento ::first-letter con segno di punteggiatura e cifra:

Nell'esempio seguente, il primo paragrafo inizia con un trattino e il secondo con una cifra. Nota come il trattino iniziale viene stilizzato insieme alla prima lettera, mentre una cifra iniziale viene stilizzata da sola come primo carattere della riga.

Esempio di codice ::first-letter

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>-Lorem ipsum is simply dummy text...</p>
    <p>1Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Provalo tu stesso »

Esempio di capolettera:

Un uso classico di ::first-letter è il capolettera, dove la lettera iniziale viene ingrandita e portata in float in modo che le righe successive le si avvolgano attorno. Combina un grande font-size, float: left e un po' di padding per ottenere l'effetto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 3em;
        font-weight: bold;
        color: #1c87c9;
        float: left;
        padding-right: 8px;
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <p>
      Drop caps draw the reader's eye to the start of a paragraph. They
      are a long-standing typographic tradition, and CSS lets you add them
      with no extra markup at all.
    </p>
  </body>
</html>

Risorse correlate

CSS ::first-line — stilizza l'intera prima riga invece della sola prima lettera.
CSS float — necessario per far avvolgere il testo attorno a un capolettera.
CSS text-transform — da combinare con ::first-letter per mettere in maiuscolo il carattere iniziale.

Esercitazione

Pratica

Come funziona il selettore pseudo-elemento CSS ::first-letter?

Seleziona e stilizza la prima lettera di ogni paragrafo.Seleziona e stilizza l'ultima lettera di ogni paragrafo.Può essere usato con elementi a livello di blocco e celle di tabella.Può essere usato per selezionare e stilizzare la prima lettera di ogni parola in un paragrafo.