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
.
(publicité)
À lire également dans La Cascade :
Quantity queries pour CSS, de Heydon Pickering
Autres ressources à consulter sur ce sujet :
- MDN : :only-of-type
- Référence SitePoint (en anglais): :only-of-type
- CSS reference Codrops (en anglais): :only-of-type
- Wiki W3C (en anglais): :only-of-type
- Spécification W3C (en anglais)
- Autres entrées du Dico CSS :
- nth-last-child
- nth-child
- nth-of-type
- nth-last-of-type
- first-of-type
- last-of-type
- first-child
- last-child
- only-child
- only-of-type
Autres articles intéressants :
articles en français :
articles en anglais :
Copyright CSS-Tricks .
Sur l’auteur : Chris Coyier 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.