: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.
La pseudo-classe CSS :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 le sé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