Comment styliser sélectivement des cellules de grille CSS spécifiques sans utiliser « nth-child » ?

Comment cibler des cellules de grille spécifiques en CSS

Sélection de lignes et de colonnes sans enfants de grille

Dans une disposition de grille CSS, les sélecteurs de nième enfant le font ne suffit pas de sélectionner des cellules spécifiques car le contenu peut être placé dynamiquement dans les cellules. Cependant, vous pouvez utiliser un élément wrapper avec display: contents pour obtenir le comportement souhaité.

Considérez le scénario suivant :

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.grid-item {
  background: #999;
}

Pour sélectionner tous les éléments de la deuxième colonne, placez-les dans un wrapper avec display: contents. Cela vous permet de styliser collectivement les cellules de la deuxième colonne.

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.grid-container {
  display: contents;
  grid-column: 2;
}

.grid-item {
  background: #999;
}

Cette approche garantit que les éléments enveloppés se comportent comme s'ils étaient des enfants directs du conteneur de grille, vous permettant d'appliquer des styles en conséquence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!