---
title: '::first-letter'
slug: 'Web/CSS/::first-letter'
tags:
  - CSS
  - Pseudo-element
  - Reference
translation_of: 'Web/CSS/::first-letter'
---
<div>{{CSSRef}}</div>

<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::first-letter</code></strong> 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.</p>

<pre class="brush: css no-line-numbers">/* Sélectionne la première lettre */
/* d'un élément &lt;p&gt; */
p::first-letter {
  color: red;
  font-size: 130%;
}</pre>

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

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

<p>Une première ligne n'a de signification que dans une <a href="/fr/docs/Web/Guide/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">boîte englobante</a>, ainsi le pseudo-élément <code>::first-letter</code> n'a un effet que sur les éléments ayant une valeur {{cssxref("display")}} correspondant à <code>block</code>, <code>inline-block</code>, <code>table-cell</code>, <code>list-item</code> ou <code>table-caption</code>. Dans tous les autres cas, <code>::first-letter</code> n'a pas d'effet.</p>

<h2 id="Propriétés_utilisables">Propriétés utilisables</h2>

<p>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 <code>::first-letter</code> :</p>

<ul>
 <li>Toutes les propriétés liées aux polices de caractère : {{cssxref("font")}}, {{cssxref("font-style")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.</li>
 <li>Toutes les propriétés liées à l'arrière-plan : {{cssxref("background")}},{{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}.</li>
 <li>Toutes les propriétés liées à <code>margin</code> : {{cssxref("margin")}}, {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}.</li>
 <li>Toutes les propriétés liées à <code>padding</code> : {{cssxref("padding")}}, {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</li>
 <li>Toutes les propriétés liées aux bordures : les raccourcis {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-radius")}}, {{cssxref("border-image")}}, et les propriétés détaillées.</li>
 <li>La propriété {{cssxref("color")}} .</li>
 <li>Les propriétés  {{cssxref("text-decoration")}}, {{cssxref("text-shadow")}}, {{cssxref("text-transform")}}, {{cssxref("letter-spacing")}}, {{cssxref("word-spacing")}} (lorsqu'approprié), {{cssxref("line-height")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{cssxref("float")}}, {{cssxref("vertical-align")}} (seulement si <code>float</code> vaut <code>none</code>).</li>
</ul>

<p>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.</p>

<div class="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.<br>
<br>
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.<br>
<br>
Si les navigateurs anciens doivent être supportés, <code>:first-letter</code> est le seul choix viable. Sinon, la syntaxe <code>::first-letter</code> doit être privilégiée.</div>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Exemples">Exemples</h2>

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

<h3 id="CSS">CSS</h3>

<pre class="brush: css">p::first-letter {
  color: red;
  font-size: 130%;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;-The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;_The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;"The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;'The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;*The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;#The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Exemples', '80%', 420)}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Spécification</th>
   <th>Statut</th>
   <th>Commentaire</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Généralisation des propriétés permises pour la mise en forme du texte et des popriétés de mise en page en-ligne, {{cssxref("opacity")}} et {{cssxref("box-shadow")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow avec ::first-letter')}}</td>
   <td>{{Spec2('CSS3 Text Decoration')}}</td>
   <td>Autorise l'usage de {{cssxref("text-shadow")}} avec <code>::first-letter</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#first-letter', '::first-letter')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Définition des cas limites comme les listes, ou les comportement spécifiques à certaines langues (comme le digraphe néerlandais <code>IJ</code>).</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Aucune modification.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>La définition initiale utilisait la syntaxe à un caractère deux-points.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.selectors.first-letter")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("::first-line")}}</li>
</ul>