Cibler les premières et dernières lignes dans une grille CSS

Est-il possible de sélectionner tous les éléments dans la première et/ou la dernière ligne avec un nombre d’item arbitraires uniquement avec des sélecteurs CSS ?

Nous allons différencier dans un premier temps les grilles complètes, et les grilles incomplètes (ou équilibrées et non équilibrées). Les grilles incomplètes étant les grilles avec un nombre d’élément laissant un espace vide sur la dernière ligne.

Pour obtenir une grille de ce type, nous allons utiliser une structure HTML très simple basée sur une liste non ordonnée.

<ul class="grid">
   <li>Grid item 1</li>
   <li>Grid item 2</li>
   ...
   <li>Grid item 14</li>
   <li>Grid item 15</li>
</ul>

Cibler la première ligne d’une grille CSS

Pour cibler la première ligne d’une grille, nous n’avons pas besoin de nous soucier d’un fait qu’il s’agisse d’une grille complète ou incomplète. Un sélecteur :nth-child simple nous permet de cibler les x premiers éléments de la grille, x étant le nombre de colonnes de la grille (ici 5).

li:nth-child(-n+x) {
  background-color: #0000FF:
}

/* première ligne avec grille de 3 colonnes*/
li:nth-child(-n+3) {
  background-color: #0000FF:
}

/* première ligne avec grille de 5 colonnes*/
li:nth-child(-n+5) {
  background-color: #0000FF:
}

Cibler la dernière ligne d’une grille équilibrée

La encore rien de bien compliqué. il suffit d’utiliser le cousin du sélecteur précédent, à savoir :nth-last-child . Le principe est le même mais on commence à la fin.

li:nth-last-child(-n+x) {
  background-color: #0000FF:
}

/* dernière ligne avec grille de 3 colonnes*/
li:nth-last-child(-n+3) {
  background-color: #0000FF:
}

/* dernière ligne avec grille de 5 colonnes*/
li:nth-last-child(-n+5) {
  background-color: #0000FF:
}

Cibler la dernière ligne d’une grille non-équilibrée

Dans la vraie vie, rien n’est jamais simple et on a plus souvent à faire à des grilles non-équilibrées qu’à des grilles équilibrées. Nous ne pouvons nous permettre de cibler les x derniers éléments puisqu’ils peuvent être sur deux lignes !

Nous allons devoir utiliser conjointement les deux sélecteurs précédents. Le sélecteur :nth-child va cibler tous les x éléments dans la grille, qui seront les premiers éléments de chaque ligne avec la valeur Xn+1. Le sélecteur :nth-last-child va cibler les x derniers éléments de la grille avec la valeur-n+X. Le seul élément qui vérifie les deux conditions à la fois est le premier élément de la dernière ligne de la grille !

Un autre selecteur CSS, ~, va permettre de cibler tous les éléments après cet élément. Le code CSS combiné se présente donc de la manière suivante

/* cible le premier élément de la dernière ligne*/
li:nth-child(Xn+1):nth-last-child(-n+X), 
  /* cible les éléments suivant */
  li:nth-child(Xn+1):nth-last-child(-n+X) ~ li  {
    background-color: #0000FF: 
}

/* dernière ligne avec grille de 3 colonnes*/
li:nth-child(3n+1):nth-last-child(-n+3),
  li:nth-child(3n+1):nth-last-child(-n+3) ~ li {
    background-color: #0000FF:
}

/* dernière ligne avec grille de 5 colonnes*/
li:nth-child(5n+1):nth-last-child(-n+5),
  li:nth-child(5n+1):nth-last-child(-n+5) ~ li {
    background-color: #0000FF:
}