#:nth-child()

Du CSS conditionnel ? Keskecé ?

C'est du CSS normal, en vrai. Lorsque vous écrivez une règle CSS, son effet ne s'appliquera que si l'élément ciblé par le sélecteur existe. Nous allons donc écrire un sélecteur qui ciblera le dernier élément enfant d'un conteneur, mais seulement s'il est à une position impaire.

Si vous n'êtes pas au point sur ce qu'est un sélecteur CSS, faites un tour sur l'article du MDN sur la syntaxe CSS et l'article sur les sélecteurs. L'important à en retenir pour le moment, c'est qu'on peut combiner des sélecteurs.

Et nous avons deux sélecteurs en particulier qui vont nous intéresser :

:last-child va sélectionner le dernier élément enfant d'un conteneur

:nth-child(odd) va sélectionner tous les éléments enfants à une position impaire (le 1er, le 3ième, le 5ième, etc)

Pour ceux qui ont du mal avec la terminologie, les "enfants" d'un conteneur, c'est basiquement les éléments que vous y mettez. Donc si on prend cet exemple très simple :

<div class="demo"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>

L'élément conteneur, celui qui a la classe demo, contient cinq éléments div qui sont ses enfants (des descendants directs). Si les div contenaient aussi d'autres éléments, ceux-là seraient plutôt des descendants (tout court) de notre conteneur.

Pour en revenir au sujet, on aimerait donc bien que dans cet exemple, ce cinquième élément, qui est le dernier enfant de la liste, et qui a le malheur d'être en position impaire, soit affiché de manière à occuper deux colonnes plutôt qu'une seule.

Pour ça, nous allons écrire un sélecteur qui va cibler les éléments div qui sont les enfants directs du conteneur de classe demo, ce qui va s'écrire .demo > div. Mais comme on veut spécifiquement cibler un div qui est le dernier de la liste ET qui est impair, on va lui coller les deux sélecteurs mentionnés plus haut, et notre sélecteur devient : .demo > div:last-child:nth-child(odd).

Et on en fait quoi maintenant ?

Cette fois, on va avoir besoin de nos connaissances en CSS grid, mais si on part d'une configuration simple d'affichage en deux colonnes, on va juste indiquer à l'élément div sélectionné qu'il devra prendre deux colonnes de large plutôt qu'une, avec la propriété grid-column.

Ce qui donnera le CSS suivant :

.demo { display:grid; grid-template-columns: repeat(2, 1fr); } .demo > div:last-child:nth-child(odd) { grid-column: span 2; }

Désormais, avec ce code, que notre conteneur de classe demo ait 3, 7, 13 ou 379 enfants, le dernier s'affichera toujours sur deux colonnes !

Plus qu'à appliquer ça à vos forums maintenant ;p