CSS ::first-letter Pseudo-élément

Le pseudo-élément ::first-letter applique des styles à la première lettre de la première ligne dans un conteneur de niveau bloc. Il ne sélectionne pas les éléments de niveau en ligne, tels que les images ou les tableaux en ligne.

Le pseudo-élément ::first-letter ne correspond pas aux signes de ponctuation qui précèdent ou suivent immédiatement la première lettre. Il ne s'applique qu'aux caractères alphabétiques, et non aux chiffres ou aux symboles.

INFO

La spécification CSS3 a introduit ::first-letter pour distinguer les pseudo-classes des pseudo-éléments.

Propriétés autorisées

Voici les propriétés CSS qui peuvent être utilisées avec le pseudo-élément ::first-letter :

Propriétés de police : 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 et font-family.

Propriétés d'arrière-plan : background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image, et background-clip.

Propriétés de marge : margin, margin-top, margin-right, margin-bottom, margin-left.

Propriétés de remplissage : padding, padding-top, padding-right, padding-bottom, padding-left.

Propriétés de bordure : les raccourcis, border-style, border-color, border-width, border-radius, border-image, les propriétés détaillées.

La propriété color.

Les propriétés text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (le cas échéant), text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (uniquement float: none;).

Version

Selectors Level 3

CSS Level 2 (Revision 1)

CSS Level 1

Syntaxe

Exemple de syntaxe CSS ::first-letter

css

::first-letter {
  css declarations;
}

Exemple du pseudo-élément `::first-letter` :

Exemple de code CSS ::first-letter

html

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

Try it Yourself »

Résultat

::first-letter example

Exemple du pseudo-élément `::first-letter` avec un signe de ponctuation et un chiffre :

Exemple de code ::first-letter

html

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

Try it Yourself »

Pratique

Comment fonctionne le sélecteur de pseudo-élément CSS ::first-letter ?

Il sélectionne et met en forme la première lettre de chaque paragraphe.Il sélectionne et met en forme la dernière lettre de chaque paragraphe.Il peut être utilisé avec des éléments de niveau bloc et des cellules de tableau.Il peut être utilisé pour sélectionner et mettre en forme la première lettre de chaque mot d'un paragraphe.

CSS ::first-letter Pseudo-élément ​

Propriétés autorisées ​

Version ​

Syntaxe ​

Exemple du pseudo-élément ::first-letter : ​

Résultat ​

Exemple du pseudo-élément ::first-letter avec un signe de ponctuation et un chiffre : ​

Pratique ​