How to Selectively Style Specific CSS Grid Cells Without Using `nth-child`?

How to Target Specific Grid Cells in CSS

Selecting Rows and Columns Without Grid Children

In a CSS grid layout, nth-child selectors do not suffice to select specific cells as the contents can be dynamically placed within the cells. However, you can use a wrapper element with display: contents to obtain the desired behavior.

Consider the following scenario:

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

.grid-item {
  background: #999;
}

To select all elements within the second column, enclose them within a wrapper with display: contents. This allows you to style the cells in the second column collectively.

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

This approach ensures that the wrapped elements behave as if they were direct children of the grid container, allowing you to apply styles accordingly.

The above is the detailed content of How to Selectively Style Specific CSS Grid Cells Without Using `nth-child`?. For more information, please follow other related articles on the PHP Chinese website!