I think CSS's own internal logic prevents this sort of syntax from working, since you could be talking about any element matching `red-box`. There's no good way to refer to a specific match of a selector, unless you enforce that the selector only selects 1 thing, even then, that would be conceptually hard to deal with.

I think flexbox and grid handle a good chunk of what you'd want here, but having to handle constraints at the "group" level. Either flexbox, so the browser finds the best way to place elements into a line based on your rules, or grid for 2 dimensions:

  boxes {
    display: grid;

    /* there are only 2 columns, 100px each */
    grid-template-columns: 100px 100px;

    /* all rows are 100px tall */
    grid-auto-rows: 100px;

    > * {
       /* All children take up 1 col, and 1 row */
       grid-column-end: span 1;
       grid-row-end: span 1;
    }
  }

  blue-box {
    /* blue-box must start at col #2 and row #2 */
    grid-column-start: 2;
    grid-row-start: 2;
  }

I hear you, though one of the newest CSS features does in fact support this. It's called the anchor positioning API: https://developer.chrome.com/blog/anchor-positioning-api

The problem with this specific API is that it depends on source order. To have element-b anchored to element-a, element-a must come first in source. I'm not really sure if it was designed that way or just implemented that way in Chrome, but it's the behavior I experienced when I played around with it.

Tailwind’s group selectors may be able to help some here, not sure and I’m on mobile so can’t play with it. I am working on a as-close-to-pure CSS solution for a list with content to one side. When you scale to mobile, the list is the only displayed element. If you click a list item, the details become the full view with a button to go back to the list.

Currently we are detecting mobile based on a JS library and branching the template based on that, which I abhor. Using Tailwind’s media prefixes and some data- group selectors, I’ve gotten a rough version working with just two small JS listeners to toggle the open state.

I think you could apply group rules to target a specific child or sibling in such a way that you can apply specific rulesets, and maybe CSS variables to dynamically base those on sibling values.

Yes, that's exactly what I'm talking about!

Yeah it would be nice if it felt like saying "this goes here, that goes there." I wanted it to mirror how someone might verbally speak about layout. It gets harder when you consider multi-dimensional layouts like grids, but for 1D things like headers or lists, it would significantly reduce complexity.