CSS Add CSS style to the parent(without .second-stage class) of .apply-style-here using CSS only

[KennethJer]

Hello,

How can I apply a style to the parent div of .apply-style-here styles by meeting only this condition? The Parent of .apply-style-here should be a plain div or without the .second-stage class .apply-style-here Parent's Parent should not have a .second-stage

Spoiler

You don't have permission to view the spoiler content. Log in or register now.

Thank you

 

[RidgeOa]

You can try this:

/* Result: Put border to all parent of apply-style-here class */
.first-stage:has(div > .apply-style-here) > div {
/*     margin-top: 20px; */
  border: 1px solid red;
}

/* Result: No styles applied at all */
.first-stage:not('div > .second-stage') > div {
  border: 1px solid blue;
}

/* Result: No styles applied at all */
.first-stage:has(div:not('.second-stage') > .apply-style-here) > div {
    border: 1px solid blue;
}

/* Result: Applied to all .apply-style-here even second .second-stage is present */
.first-stage:has(div:not(.second-stage) > .apply-style-here) > div {
    border: 1px solid blue;
}
/* Result: Applied to all .apply-style-here even second .second-stage is present */

.first-stage:has(div:not(.second-stage > .apply-style-here)) > div {
    border: 1px solid blue;
}

Remember that Firefox hasn't adapted has() yet

first-stage div:not(.second-stage):has(.apply-style-here) {
    border: 1px solid blue;
}