::first-letter
==============

Le pseudo-élément **`::first-letter`** sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.


```css
/\* Sélectionne la première lettre \*/
/\* d'un élément <p> \*/
p::first-letter {
  color: red;
  font-size: 130%;
}
```


La première lettre d'un élément n'est pas forcément évidente à identifier :

* La ponctuation, c'est-à-dire n'importe quel caractère défini dans une des classes Unicode
 *open*
 (Ps),
 *close*
 (Pe),
 *initial quote*
 (Pi),
 *final quote*
 (Pf) et
 *other punctuation*
 (Po) , précédant ou suivant immédiatement la première lettre est aussi sélectionnée par ce pseudo-élément.
* D'autre part, certaines langues possèdent des digraphes qui sont mis en majuscule ensemble, comme le `IJ` en néerlandais. Dans ces rares cas, les deux lettres du digraphes doivent être sélectionnées par le pseudo-élément `::first-letter`. (Ceci est mal supporté par les navigateurs, reportez vous au tableau de compatibilité des navigateurs).
* Enfin, une combinaison du pseudo-élément `::before` et de la propriété `content` peut injecter du texte au début de l'élément. Dans ce cas, `::first-letter` sélectionnera la première lettre du contenu inséré.

Une première lettre n'a de signification que dans une boîte englobante, ainsi le pseudo-élément `::first-letter` n'a un effet que sur les éléments ayant une valeur `display` correspondant à `block`, `inline-block`, `table-cell`, `list-item` ou `table-caption`. Dans tous les autres cas, `::first-letter` n'a pas d'effet.

Propriétés utilisables
----------------------

Seul un petit sous-groupe de propriétés CSS peuvent être utilisées dans un bloc déclaratif contenant un sélecteur utilisant le pseudo-élément `::first-letter` :

* Toutes les propriétés liées aux polices de caractère : `font`, `font-style`, `font-feature-settings`, `font-kerning`, `font-language-override`, `font-stretch`, `font-synthesis`, `font-variant`, `font-variant-alternates`, `font-variant-caps`, `font-variant-east-asian`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-position`, `font-weight`, `font-size`, `font-size-adjust`, `line-height` et `font-family`.
* Toutes les propriétés liées à l'arrière-plan : `background`,`background-color`, `background-image`, `background-clip`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment` et `background-blend-mode`.
* Toutes les propriétés liées à `margin` : `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`.
* Toutes les propriétés liées à `padding` : `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`.
* Toutes les propriétés liées aux bordures : les raccourcis `border`, `border-style`, `border-color`, `border-width`, `border-radius`, `border-image`, et 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` (lorsqu'approprié), `line-height`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, `box-shadow`, `float`, `vertical-align` (seulement si `float` vaut `none`).

Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne.

**Note :** Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.

Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.

Si les navigateurs anciens doivent être supportés, `:first-letter` est le seul choix viable. Sinon, la syntaxe `::first-letter` doit être privilégiée.

Syntaxe
-------

Error: could not find syntax for this itemExemples
--------

Dans cet exemple, on prend la première lettre de chaque paragraphe et on l'affiche en rouge et en gros.

### CSS


```css
p::first-letter {
  color: red;
  font-size: 130%;
}
```

### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem
  ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
<p>
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
  dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
  dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
  feugait nulla facilisi.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `::first-line`