Comment appliquer le style au div parent de .apply-style-here en satisfaisant uniquement cette condition
<div class="first-stage"> <div> <div class="apply-style-here">Content</div> </div> </div> <div class="first-stage"> <div class="second-stage"> <div> <div class="apply-style-here">Content</div> </div> </div> <div> <div class="apply-style-here">Content</div> </div> </div>
Essayez des solutions
/* 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; }
En fonction de votre description, les sélecteurs suivants peuvent fonctionner :