W3docs
it
Accedi

CSS ::first-line Pseudo Elemento

Usa il pseudo-elemento CSS ::first-line per selezionare e stilizzare la prima riga in un contenitore a livello di blocco. Scopri il pseudo-elemento con esempi.

Il pseudo-elemento ::first-line applica stili alla prima riga di un contenitore a livello di blocco. Non seleziona elementi a livello inline, come immagini o tabelle inline.

Viene utilizzato più spesso per tocchi tipografici che giornali e riviste applicano alla riga iniziale di un articolo — un colore diverso, maiuscoletto o spaziatura delle lettere extra — senza racchiudere quella riga in markup aggiuntivo. Poiché la "prima riga" dipende dalla larghezza dell'elemento, dalla dimensione del carattere e dal viewport dell'utente, la parte che viene stilizzata viene ricalcolata dal browser man mano che il layout cambia.

Solo un insieme specifico di proprietà CSS può essere applicato a ::first-line. L'elenco completo è descritto nella sezione Proprietà consentite qui sotto.

Il pseudo-elemento ::first-letter eredita solo le proprietà applicabili a ::first-line. Per tutte le altre proprietà, eredita dall'elemento padre. Se entrambi i pseudo-elementi vengono utilizzati, gli stili definiti su ::first-letter sovrascrivono quelli ereditati da ::first-line.

Il pseudo-elemento ::first-line può anche essere scritto con un singolo due punti (:first-line), supportato da tutti i browser.

Versione

CSS Pseudo-Elements Level 4

Selectors Level 3

CSS Level 2

CSS Level 1

Proprietà consentite

Il pseudo-elemento ::first-line accetta solo alcune proprietà CSS. Vediamole:

Specificità ed ereditarietà del pseudo-elemento ::first-line

Il testo sulla prima riga eredita solo le proprietà applicabili al pseudo-elemento ::first-line. Per tutte le altre proprietà, eredita dall'elemento padre. Ad esempio, il pseudo-elemento ::first-letter eredita gli stili applicati dal pseudo-elemento ::first-line.

Il pseudo-elemento ::first-line ha una specificità maggiore rispetto al selettore dell'elemento base, quindi i suoi stili sovrascrivono le dichiarazioni normali sull'elemento. Tuttavia, le regole CSS standard !important si applicano comunque in base alle normali regole a cascata.

Sintassi

Esempio di sintassi CSS ::first-line

::first-line {
  css declarations;
}

Esempio del pseudo-elemento ::first-line:

Esempio di codice CSS ::first-line

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-line {
        color: #85d6de;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>::first-line selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>
Provalo tu stesso »

In questo esempio, solo le parole che cadono sulla prima riga renderizzata del paragrafo diventano azzurro chiaro e maiuscolo. Ridimensiona la finestra e la parte stilizzata cambia automaticamente, perché ::first-line segue la riga che il browser effettivamente dispone, non un numero fisso di caratteri.

Risultato

Proprietà CSS ::first-line

Cose da tenere a mente

  • Solo i contenitori a livello di blocco rispondono. Applicare ::first-line a un elemento inline (come un <span> o un <a> che non è stato reso display: block) non ha alcun effetto.
  • La riga è dinamica. Non è possibile selezionare un numero fisso di caratteri — se il viewport, il font o il padding cambia, il browser ricalcola quale testo appartiene alla prima riga e lo stilizza di conseguenza.
  • Il supporto delle proprietà è limitato. Le proprietà che influenzano il layout (come margin, padding, border o width) vengono ignorate su ::first-line. Usa solo le proprietà elencate in Proprietà consentite.
  • L'ordine conta con ::first-letter. Quando stili entrambi, dichiarali in modo che il vincitore previsto sia chiaro: gli stili di ::first-letter sovrascrivono le proprietà corrispondenti ereditate da ::first-line. Per lo stile del capolettera, consulta il pseudo-elemento ::first-letter.

Pratica

Pratica
A cosa può essere applicato il selettore pseudo-elemento ::first-line in CSS?
A cosa può essere applicato il selettore pseudo-elemento ::first-line in CSS?
Was this page helpful?