:only-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 July 2015.
La pseudo-classe CSS :only-of-type
permet de cibler un élément qui ne possède aucun nœud frère du même type.
Exemple interactif
Note : Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de niveau 4).
Syntaxe
css
:only-of-type {
/* ... */
}
Exemples
Mettre en forme des éléments sans voisins du même type
HTML
html
<main>
<div>Je suis l'élément `div` n°1.</div>
<p>Je suis le seul élément `p` parmi mes voisins.</p>
<div>Je suis l'élément `div` n°2.</div>
<div>
Je suis l'élément `div` n°3.
<i>Je suis le seul enfant `i`.</i>
<em>Je suis l'élément `em` n°1.</em>
<em>Je suis l'élément `em` n°2.</em>
</div>
</main>
CSS
css
main :only-of-type {
color: red;
}
Résultat
Spécifications
Specification |
---|
Selectors Level 4 # only-of-type-pseudo |
Compatibilité des navigateurs
BCD tables only load in the browser