「nth-child」を使用せずに特定の CSS グリッド セルを選択的にスタイル設定する方法は?

CSS で特定のグリッド セルをターゲットにする方法

グリッドの子のない行と列を選択する

CSS グリッド レイアウトでは、n 番目の子セレクターは次のことを行います。コンテンツはセル内に動的に配置できるため、特定のセルを選択するだけでは十分ではありません。ただし、display:contents でラッパー要素を使用すると、目的の動作を得ることができます。

次のシナリオを考えてみましょう:

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

.grid-item {
  background: #999;
}

2 番目の列内のすべての要素を選択するには、要素を で囲みます。 display: コンテンツを含むラッパー。これにより、2 番目の列のセルをまとめてスタイル設定できます。

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;
}

このアプローチにより、ラップされた要素がグリッド コンテナーの直接の子であるかのように動作し、それに応じてスタイルを適用できるようになります。

>

以上が「nth-child」を使用せずに特定の CSS グリッド セルを選択的にスタイル設定する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。