Pseudo-elemento CSS ::first-letter
Usa lo pseudo-elemento CSS ::first-letter per selezionare e applicare stili alla prima lettera della riga. Scopri lo pseudo-elemento e prova gli esempi.
Lo pseudo-elemento ::first-letter applica stili alla prima lettera della prima riga in un contenitore a livello di blocco. Non seleziona elementi a livello inline, come immagini o tabelle inline.
Lo pseudo-elemento ::first-letter non seleziona i segni di punteggiatura che precedono o seguono immediatamente la prima lettera. Si applica solo ai caratteri alfabetici, non ai numeri o ai simboli.
La specifica CSS3 ha introdotto ::first-letter per distinguere le pseudo-classi dagli pseudo-elementi.
Proprietà ammesse
Ecco le proprietà CSS che possono essere usate 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à di sfondo: background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image e background-clip.
Proprietà dei margini: margin, margin-top, margin-right, margin-bottom, margin-left.
Proprietà del padding: padding, padding-top, padding-right, padding-bottom, padding-left.
Proprietà dei bordi: shorthand, border-style, border-color, border-width, border-radius, border-image, longhand.
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
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>Risultato
Esempio dello pseudo-elemento ::first-letter con un segno di punteggiatura e una cifra:
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>