Pseudo-elemento CSS ::first-line
Usa lo pseudo-elemento CSS ::first-line per selezionare e applicare stili alla prima riga in un contenitore a livello di blocco. Scopri lo pseudo-elemento e prova gli esempi.
Lo 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.
Solo un insieme specifico di proprietà CSS può essere applicato a ::first-line. L'elenco completo è descritto nella sezione Proprietà ammesse qui sotto.
Lo pseudo-elemento ::first-letter eredita solo le proprietà applicabili a ::first-line. Per tutte le altre proprietà, eredita dall'elemento genitore. Se vengono usati entrambi gli pseudo-elementi, gli stili definiti su ::first-letter hanno la precedenza su quelli ereditati da ::first-line.
Lo pseudo-elemento ::first-line può essere scritto anche con un solo due punti (:first-line), notazione supportata da tutti i browser.
Versione
Proprietà ammesse
Lo pseudo-elemento ::first-line accetta solo alcune proprietà CSS. Vediamole:
- Tutte le proprietà relative ai font: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch e font-family.
- Tutte le proprietà relative allo sfondo: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment e background-blend-mode.
- Alcune proprietà usate per applicare stili al testo: text-shadow, text-decoration, text-decoration-color, text-decoration-line e text-decoration-style.
- La proprietà CSS color.
- word-spacing, line-height, letter-spacing, text-transform e white-space.
Specificità ed ereditarietà dello pseudo-elemento ::first-line
Il testo sulla prima riga eredita solo le proprietà applicabili allo pseudo-elemento ::first-line. Per tutte le altre proprietà, eredita dall'elemento genitore. Ad esempio, lo pseudo-elemento ::first-letter eredita gli stili applicati dallo pseudo-elemento ::first-line.
Lo pseudo-elemento ::first-line ha una specificità maggiore rispetto al selettore dell'elemento di base, quindi i suoi stili hanno la precedenza sulle dichiarazioni normali dell'elemento. Tuttavia, le regole !important standard dei CSS continuano ad applicarsi secondo le normali regole della cascata.
Sintassi
Esempio di sintassi CSS ::first-line
::first-line {
css declarations;
}Esempio dello 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>Risultato
