: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.


À lire également dans La Cascade :

Quantity queries pour CSS, de Heydon Pickering

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

articles en français :

articles en anglais :


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d'inspiration pour vos propres designs.