:only-of-type

Le sélecteur :only-of-type représente tout élément qui n'a aucun frère (sibling) du même type que lui.

p:only-of-type {
  color: red;
}

Si le sélecteur n'est précédé par aucune balise, il s'appliquera à toutes les balises. S'il est précédé par une balise (comme ci-dessus : p), il s'appliquera au type de balise en question. Par exemple .exemple:only-of-type se comportera comme p:only-of-type si .exemple est appliquée à un élément paragraphe.

Exemple simple

Si nous avons une liste contenant un élément et une autre liste contenant trois éléments, nous pouvons cibler l'item de liste solitaire avec :only-of-type :

See the Pen only-of-type by Chris Coyier (@chriscoyier) on CodePen.

Ce n'est peut-être pas le meilleur exemple car :only-child fonctionnerait tout aussi bien ici, du fait qu'il n'y a que des <li> à l'intérieur d'une liste. Si nous utilisons des <div> à la place, nous pouvons cibler un paragraphe à l'intérieur de cette div s'il est le seul paragraphe, même si la div contient d'autres éléments :

See the Pen only-of-type by Chris Coyier (@chriscoyier) on CodePen.

Pour le fun
Vous pourriez obtenir la même sélection avec les combinaisons de sélecteurs suivantes :

:first-of-type:last-of-type
:nth-of-type(1):nth-last-of-type(1)

Cependant ces combinaisons utilisent deux sélécteurs enchaînés, ce qui signifie que la spécificité est double de :only-of-type.

Menu

Exemple simple