Une étape avant d’arriver au sélecteur :empty, :only-child sélectionne les éléments qui sont entièrement seuls à l’intérieur de leur conteneur. On pourrait se demander comment diable utiliser ce sélecteur, mais les cas d’utilisation sont étonnamment nombreux.

Only-child pour les images “héros”

Sur mon blog (the new code) on trouve une bonne utilisation d’:only-child où la plupart des articles ont une illustration dans le <header>. La plupart de ces images sont entières, de bord à bord, mais seulement si elles sont le seul occupant du <header>. Habituellement, on utilise une classe ou même on utilise un style en ligne :

<article>
  <header>
  <img src="sad-kid.jpg" alt style="width: 100%; height: auto">
  </header>
  …
</article>

Mais si on réfléchit à la logique de cette mise en page, on se rend compte qu’on pourrait faire beaucoup plus simple (et éviter le style en ligne) en utilisant :only-child :

header img:only-child { width: 100%; height: auto; }

Ce qu’on pourrait traduire par “si une image est le seul élément à l’intérieur d'un header, lui donner la pleine largeur de son élément parent”.

Remarquez que ça fonctionne même si l’image est enveloppée dans un élément <figure> à l’intérieur du <header>. Avec ce sélecteur, l’élément <figure> n'est pas compté dans les autres enfants car il n’a aucune spécificité, l’image est donc toujours considérée comme le “seul enfant”. Par contre, si on ajoute une <figcaption> qui serait donc un “frère” de l’image (immédiatement au-dessus ou au-dessous), le sélecteur ne s’applique plus. Pour obtenir le même résultat, nous pourrions alors utiliser le sélecteur :only-of-type.

Vérifier si un élément a un frère

CSS n’a pas vraiment la capacité de dire combien d’éléments se trouvent sur une page (c’est JavaScript qui sait faire ça), mais on peut quand même s’assurer qu’un style est appliqué à un élément à la condition qu’il ne soit pas le seul élément à l’intérieur de son parent.

Par exemple, supposons que nous voulions appliquer un style au dernier paragraphe d’une <div>, mais uniquement s’il n'est pas le seul élément de cette <div>. Notre contenu est généré dynamiquement, il n’y a donc pas moyen de savoir combien on aura de paragraphes dans notre <div>.

Mais si nous utilisons le sélecteur :only-child combiné avec le sélecteur de négation :not, nous pouvons déterminer si le paragraphe n’est pas seul avant de lui appliquer un style :

div p:last-child:not(:only-child) { font-weight: bolder; }

Grâce à cette sélection, le dernier paragraphe sera en gras, mais seulement s’il n’est pas le seul élément dans la <div>. Pour être encore plus précis, on pourrait utiliser :last-of-type et :only-of-type dans le même assemblage de sélecteurs.

Compatibilité

La compatibilité d’:only-child est excellente, tous les navigateurs modernes la supportent.

Alternatives

D’autres sélecteurs accomplissent la même chose : :first-child:last-child (qui signifie “le premier enfant de l’élément est aussi son dernier enfant”) et :nth-child(1):nth-last-child(1) (même signification), bien qu’avec une plus forte spécificité.

Voir la page MDN de :only-child