Re: [csswg-drafts] [css-contain-3] Define a syntax for style-based container queries (#6396)

for it to respond to your style you'd have to query the style like so:
```css
.feature__menu {
  & .feature-layout__group {
    container-type: style;
    ...
    @container style(justify-content: space-between) {
      /* add Extra Styles that only apply when this element has justify-content set to space-between */
      ...
    }
  }
}
```

because your existing system is adding `justify-content: space-between` when the data attribute is on the parent, those Extra Styles will only<sup>[1]</sup> be there when your feature__menu element has `data-screen-col_12` attribute containing `justify-content:space-between;`

If you need to add more styes only based on the data attribute selector though, you can add more styles the same way you're already adding `justify-content: space-between` and don't need a style container query.

<sub>[1] unless something else will set justify-content to space-between too</sub>



-- 
GitHub Notification of comment by James0x57
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6396#issuecomment-991347717 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 10 December 2021 22:30:58 UTC