:first-of-type
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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
Loading…