CSS :only-of-type Pseudo-classe
Utilisez la pseudo-classe CSS :only-of-type pour sélectionner l'unique enfant de son type parmi les enfants d'un parent.
La pseudo-classe CSS :only-of-type correspond à un élément qui est le seul de son type parmi les enfants de son parent. « Type » désigne ici le nom de la balise (par exemple p, img ou h2), et non une classe ou un identifiant.
Ainsi, p:only-of-type correspond à un <p> uniquement s'il est le seul paragraphe à l'intérieur de son parent — même si ce parent contient d'autres éléments tels que des titres, des listes ou des images.
Cette page explique le fonctionnement de :only-of-type, en quoi il diffère de :only-child, et dans quelle situation chacun est le bon outil.
Quand l'utiliser
:only-of-type est utile lorsque vous souhaitez styliser un élément uniquement quand il se trouve seul au sein de son groupe de frères et sœurs du même type. Cas courants :
- Mettre en évidence un paragraphe dans une carte uniquement lorsqu'il est le seul paragraphe présent.
- Ajouter un espacement supplémentaire à une liste lorsqu'elle est la seule liste d'une section.
- Styliser une image unique différemment des images qui apparaissent dans une galerie (plusieurs images).
Si le parent reçoit un second élément du même type, la règle cesse de s'appliquer automatiquement — sans JavaScript ni classes supplémentaires.
:only-of-type vs :only-child
Ces deux pseudo-classes se ressemblent mais répondent à des questions différentes :
:only-childcorrespond à un élément uniquement s'il n'a aucun frère ni sœur (c'est l'unique enfant du parent, quel que soit son type).:only-of-typecorrespond à un élément s'il n'a aucun frère ni sœur du même type — les frères et sœurs d'autres types sont autorisés.
Considérez ce balisage :
<div>
<h2>Heading</h2>
<p>Only paragraph.</p>
</div>Ici, le <p> n'est pas un :only-child (le <h2> est un frère), mais il est le :only-of-type de type p, donc p:only-of-type lui correspond.
Version
Syntaxe
Syntaxe CSS :only-of-type
:only-of-type {
css declarations;
}Exemple du sélecteur :only-of-type :
Exemple de code CSS :only-of-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:only-of-type {
background: #1c87c9;
}
</style>
</head>
<body>
<h2>:only-of-type selector example</h2>
<div>
<p>Lorem ipsum is simply dummy text.</p>
</div>
<div>
<p>Lorem ipsum is simply dummy text.</p>
<p>Lorem ipsum is simply dummy text.</p>
</div>
</body>
</html>Dans l'exemple ci-dessus, le premier <div> contient un seul paragraphe, qui reçoit donc le fond bleu. Le second <div> contient deux paragraphes ; aucun ne correspond à p:only-of-type, ils restent donc sans style.
Mélanger les types dans le même parent
Puisque :only-of-type ne comptabilise que les frères et sœurs du même type, un parent peut contenir plusieurs éléments de types différents, et chaque type « unique » correspond toujours :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div :only-of-type {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<h2>The only heading</h2>
<p>The only paragraph.</p>
<span>The only span.</span>
</div>
</body>
</html>Ici, <h2>, <p> et <span> sont chacun le seul élément de leur type à l'intérieur du <div>, donc les trois sont stylisés.
Compatibilité des navigateurs
:only-of-type est pris en charge par tous les navigateurs modernes — Chrome, Firefox, Safari, Edge et Opera. Il fait partie de Selectors Level 3, vous pouvez donc l'utiliser sans solution de repli dans les navigateurs actuels.
Sélecteurs associés
:only-child— correspond à un élément sans frère ni sœur d'aucun type.:first-of-type— le premier élément de son type parmi ses frères et sœurs.:last-of-type— le dernier élément de son type parmi ses frères et sœurs.:nth-of-type— sélectionne les éléments d'un type par leur position.