Le :only-of-typesélecteur de pseudo-classe en CSS représente tout élément qui n'a pas de frères du type donné.
p:only-of-type ( color: red; )Si aucune balise ne précède le sélecteur, il correspondra à n'importe quelle balise (par exemple :only-of-type). Si un autre sélecteur le précède, il correspondra en fonction du type de balise que le sélecteur correspond. Par exemple, .example:only-of-typese comportera comme p:only-of-typesi .exampleest appliqué à un élément de paragraphe.
Exemple simple
Une liste ne contient qu'un seul élément de liste. Une autre liste contient trois éléments de liste. Nous pouvons cibler l'élément de liste qui est seul avec :only-of-type.
Bien que ce ne soit peut-être pas le meilleur exemple, car :only-childcela fonctionnerait aussi bien là-bas puisque les éléments de liste sont les seuls enfants possibles de listes. Si nous utilisons des divs à la place, nous pourrions cibler un paragraphe à l'intérieur d'un div si c'est le seul paragraphe, bien que d'autres éléments y soient également.
À noter
Pour s'amuser, vous pouvez obtenir la même sélection :only-of-typequ'avec :first-of-type:last-of-typeou :nth-of-type(1):nth-last-of-type(1). Ceux-ci utilisent cependant deux sélecteurs chaînés, ce qui signifie que la spécificité est le double de celle de :only-of-type.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Tout | Tout | Tout | Tout | IE9 + | Tout | Tout |