[css‑grid][selectors‑4] How does the Column combinator (`||`) interact with other specifications (mainly CSS Grid)?

[ExE-Boss]

• https://drafts.csswg.org/selectors-4/#the-column-combinator
• https://drafts.csswg.org/css-grid/ (https://drafts.csswg.org/css-grid-2/)

How does the Column combinator (||) interact with CSS Grid?

And what about flexbox and the multi‑column layout?

[SelenIT]

Currently, the spec says that

Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered.

I'm afraid that the general logic regarding selectors that depend on layout would prevent applying column combinators to grid items. Regarding (multi-line) flexbox, there are no connection between items in different flex lines, so column combinator is likely not relevant there. And regarding CSS columns (and similar future fragmentation mechanisms), maybe reusing the pattern of the page selectors would be more suitable for them?

[ExE-Boss]

Well, the column combinator can’t be used to disable the grid that it’s used to select columns inside of, unless you were to use the :has(…) pseudo‑class, but that isn’t allowed in the live profile anyway.

[SelenIT]

But something like this would be potentially possible:

.grid-item-1, .grid-item-2 {
   grid-column: 1 / span 1;
}
.grid-item-1 || .grid-item-2 {
   grid-column: 5 / span 1; /* so where should '.grid-item-2' be placed then? */
}

In theory, this could be resolved by restricting the subset of CSS properties that can be applied to this selector, but this would probably mean too much complexity for both spec and implementation...