Csswg-drafts: [css-grid] grid-item pseudo-class

[indrekpaas]

I often set grid-item properties on elements which by design I shouldn’t have much context about. For example when laying out different children on a (reusable) parent grid-container. This results in having to match grid-items based on their specific attributes (e.g. class names).

It would be great to be able to set the layout logic on a parent and separate it from children.

Instead of:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent {
  display: grid;
}

.child {
  grid-column: 1 / 2;
}

We could have:

<div class="parent">
  <div></div>
  <div></div>
  <div></div>
</div>

.parent {
  display: grid;
}

.parent:grid-item {
  grid-column: 1 / 2;
}

This way we wouldn’t have to assume much about grid-items.

As a workaround I’ve been using the .parent > * compound selector to match grid-items, but this is not ideal for potential specificity issues.

A step further would match .parent:grid-item only when .parent has display: grid.

I also see this principle loosely applying on flexbox parent-child relationship.

My argument is to set all layout logic on a parent and have children follow the rules while being completely context-agnostic.

Cheers!

[paulpopus]

I'm not sure why a :grid-item pseudo-selector would be needed. You can achieve the same as you've mentioned with > * or > div.
Grid and flex also have lots of properties you can use directly on the parent to manage layouts without needing to target the children.

[indrekpaas]

Thanks for the reply @agilec-paul,

More than anything I’d like to learn about the best practices to separate layout logic from grid-items and have it tied to grid-container.

I’m aware majority of layout properties can be set on a flex-/grid-container, but CSS grid offers much more granular control over individual grid-items to create complex layouts with minimal effort.

For that, I assume .parent > * selector would have to do for now.

[jonjohnjohnson]

As a workaround I’ve been using the .parent > * compound selector to match grid-items, but this is not ideal for potential specificity issues.

Keep in mind we have the specificity-adjustment pseudo-class, :where(), to handle this. https://drafts.csswg.org/selectors-4/#where-pseudo

[FremyCompany]

More to the point, this isn't actually possible to implement.

1. To know you are a grid item, you need the style of the parent (display:grid) and the element itself (display != none, position:fixed but the grid is 3d transformed, ...).
2. To compute that style you need the selectors to have already been matched,
3. Therefore you can't possibly have a general :grid-item pseudo-selector since it causes a cycle.

(I'm therefore closing this issue since its use case has been resolved and the originally proposed solution is not something we can actually implement)

[frivoal]

This is closely related to the problem described in https://wiki.csswg.org/faq#selectors-that-depend-on-layout

[tabatkins]

Yeah, in general this is an impossible problem. Happily, tho, in most cases you're not pulling grid-container children out of flow, so you can just go ahead and assume that any children are grid items, and use the .parent > * selector mentioned previously.

[indrekpaas]

Thanks for the replies everyone.