::first-letter

  • Raccourci de la révision : CSS/::first-letter
  • Titre de la révision : ::first-letter
  • ID de la révision : 355013
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

Le pseudo-élément CSS ::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.

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édent 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 di 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 {{ cssxref("::before") }} et de la propriété {{ cssxref("content") }} peuvent 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 ligne a un sens unique dans la boîte contenante bloc, ainsi le pseudo-élément ::first-letter n'a un effet que sur les éléments ayant une valeur {{ cssxref("display") }} correspondant à block, inline-block, table-cell, list-item ou table-caption. Dans tous les autres cas, ::first-letter n'a pas d'effet.

Seul un petit sous-groupe de propriété 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 : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} et {{ Cssxref("font-family") }}.
  • Toutes les propriétés liées à l'arrière-plan : {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, et {{ Cssxref("background-attachment") }}.
  • Toutes les propriétés liées à margin : {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.
  • Toutes les propriétés liées à padding : {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.
  • Toutes les propriétés liées aux bordures : les raccourcis {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }} et les propriétés détaillées.
  • La propriété {{ cssxref("color") }} .
  • Les propriétés {{ cssxref("text-decoration") }}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (lorsqu'approprié), {{ cssxref("line-height") }}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (seuilement 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 résistant au futur.

Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elle 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.

Exemples

/* agrandir et mettre en rouge les premières lettres de chaque paragraphe */

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

Spécifications

Spécification État Commentaire
CSS Selectors Level 3 {{ Spec2('CSS3 Selectors') }} Définition des cas limites comme les listes, ou les comportement spécifiques à certaines langues (comme le digraphe néerlandais IJ)
CSS 2.1 {{ Spec2('CSS2.1') }} CSS Level 2 utilisait la syntaxe à un caractère deux-points.

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0 {{ CompatGeckoDesktop("1") }} 9.0 7.0 1.0 (85)
Ancienne syntaxe (:first-line) 1.0 {{ CompatGeckoDesktop("1") }} 5.5 3.5 1.0 (85)
Support du digraphe néerlandais IJ {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Ancienne syntaxe (:first-line) {{ CompatUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{CompatUnknown()}}
Support du digraphe néerlandais IJ {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

 

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>Le <a href="/fr/docs/CSS/Pseudo-éléments" title="/fr/docs/CSS/Pseudo-éléments">pseudo-élément</a> <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>::first-letter</code>&nbsp;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>
<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>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf) et <em>other punctuation</em> (Po) , précédent 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 di 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" title="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") }} peuvent 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 a un sens unique dans la <a href="/fr/CSS/Modèle_de_formatage_visuel#Elements_de_niveau_bloc_et_boîtes_bloc" title="fr/CSS/Modèle_de_formatage_visuel#Elements_de_niveau_bloc_et_boîtes_bloc">boîte contenante bloc</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>
<p>Seul un petit sous-groupe de propriété 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-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} et {{ Cssxref("font-family") }}.</li>
  <li>Toutes les propriétés liées à l'arrière-plan : {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, et {{ Cssxref("background-attachment") }}.</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") }} 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-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (lorsqu'approprié), {{ cssxref("line-height") }}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (seuilement si&nbsp;<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 résistant au futur.</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 elle 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="Exemples">Exemples</h2>
<pre class="deki-transform">
/* agrandir et mettre en rouge les premières lettres de chaque paragraphe */

p:first-letter { 
  color: red; 
  font-size: 130%; 
}
</pre>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="http://www.w3.org/TR/css3-selectors/#first-letter">CSS Selectors Level 3</a></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><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#first-letter" title="http://www.w3.org/TR/CSS21/selector.html#first-letter">CSS 2.1</a></td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>CSS Level 2 utilisait la syntaxe à un caractère deux-points.</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>9.0</td>
        <td>7.0</td>
        <td>1.0 (85)</td>
      </tr>
      <tr>
        <td>Ancienne syntaxe (<code>:first-line</code>)</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>5.5</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
      <tr>
        <td>Support du digraphe néerlandais <code>IJ</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>Ancienne syntaxe (<code>:first-line</code>)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{CompatUnknown()}}</td>
      </tr>
      <tr>
        <td>Support du digraphe néerlandais <code>IJ</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>&nbsp;</p>
Revenir à cette révision