Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
:first-of-type
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Lapseudo-classeCSS:first-of-type permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).
Exemple interactif
dt { font-weight: bold;}dd { margin: 3px;}dd:first-of-type { border: 2px solid orange;}<dl> <dt>Légumes :</dt> <dd>1. Tomates</dd> <dd>2. Concombres</dd> <dd>3. Champignons</dd> <dt>Fruits :</dt> <dd>4. Pommes</dd> <dd>5. Mangues</dd> <dd>6. Poires</dd> <dd>7. Oranges</dd></dl>Syntaxe
css
:first-of-type { /* ... */}Exemples
Mise en forme du premier paragraphe
HTML
html
<h2>Un titre</h2><p>Le premier paragraphe.</p><p>Le deuxième paragraphe.</p>CSS
css
p:first-of-type { color: red; font-style: italic;}Résultat
Éléments imbriqués
Cet exemple montre comment les éléments imbriqués peuvent également être ciblés. Notez que lesélecteur universel (*) est implicite lorsqu'aucun sélecteur de type n'est écrit.
HTML
html
<article> <div>Ce bloc est le premier !</div> <div>Ce <span>bloc en ligne imbriqué est le premier</span> !</div> <div> Ce <em>texte en italique imbriqué est le premier</em>, mais ce <em>texte en italique imbriqué est le dernier</em> ! </div> <div>Ce <span>bloc en ligne imbriqué est stylisé</span> !</div> <p>Ce paragraphe est le premier !</p> <div>Ce bloc est le dernier.</div></article>CSS
css
article :first-of-type { background-color: pink;}Result
Spécifications
| Specification |
|---|
| Selectors Level 4 # first-of-type-pseudo |
Compatibilité des navigateurs
Voir aussi
- La pseudo-classe
:nth-of-type - La pseudo-classe
:last-of-type - La pseudo-classe
:first-child