Toi seul : utiliser only-child de CSS

On pourrait se demander comment l'utiliser, mais les cas d'utilisation sont nombreux. Comme souvent avec les pseudo-classes, il nous permet d'écrire un code concis et adapté au contenu généré dynamiquement.

Par

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.


image
Photographie CC Nesim Kurnaz

Only-child pour les images “héros”

Sur ce blog (demosthenes.info) 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 ous 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, y compris IE9+.

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


Intéressé par CSS ? Sur la Cascade, retrouvez des articles et ressources.


original paru le dans le blog de Dudley Storey, Demosthenes.info.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu'il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2014.