0

My aim is to apply some css properties to a main tag only if it doesn't have a specific child-class-... among its children, the ... vary from one page to another.

<main className="main">
  <div className="child-class-test">
  </div>
</main>

In other words – if main doesn't have child-class-test or child-class-shezjbrz as children I want the styling to be applied to main, not otherwise.

I attempted the following unsuccessfully (the styling applies to all children regardless of adding a :not or not):

.main {
  &:has(:not([class^="child-class-"])) {
    // My styles
  } 
}
.main {
  &:not([class^="child-class-"]) {
    // My styles
  } 
}

Please note that adding or removing the :not pseudo selector or adding a whitespace to & or even adding an !important doesn't change anything. Applied this syntax inline doesn't work either

Thanks for your help.

P.S. Since CSS modules are used, there will always be some randomly generated suffix for each class.

Y H R
  • 175
  • 1
  • 7

0 Answers0