CODEWITHSUNDEEP
htmlcss
Master
Master

Reputation: 2153

How to prevent style if parent has a specific class

I have a bit of CSS that's used in my application. Unfortunately I need this bit of CSS to not apply if parent in the hierarchy has a specific class disableSpecialCSS

 *,
 *::before,
 *::after {
   border-width: 3px;
   border-style: solid;
   border-color: red;
 }

Example DOM structure

<div class="disableSpecialCSS" contenteditable="true">    
    <p><br></p>
</div>

Based on this html structure, div1, div2, span1, span2 shouldn't have the css applied because parent div has class disableSpecialCSS

I tried the following but it only prevent css to apply where it's not that css instead of all the children

body *:not(.disableSpecialCSS),
body *:not(.disableSpecialCSS)::before,
body *:not(.disableSpecialCSS)::after {
   border-width: 3px;
   border-style: solid;
   border-color: red;
 }

Any tips or suggestions would be greatly appreciated

body :not(.disableSpecialCSS) *,
body :not(.disableSpecialCSS) *::before,
body :not(.disableSpecialCSS) *::after {
  border-width: 3px;
  border-style: solid;
  border-color: red;
}
<div>
    <div class="disableSpecialCSS" contenteditable="true">    
        <p><br></p>
    </div>
</div>

Upvotes: 1

Views: 437

Answers (1)

The Fool
The Fool

Reputation: 20467

Move * selector inside the :not selector.

body :not(.disableSpecialCSS) *,
body :not(.disableSpecialCSS) *::before,
body :not(.disableSpecialCSS) *::after {
  border-width: 3px;
  border-style: solid;
  border-color: red;
}
<body>
  <div>
    <p><br></p>
  </div>
  <div class="disableSpecialCSS" contenteditable="true">
    <p><br></p>
  </div>
</body>

Perhaps a more solid solution would be this.

body :not(.reset, .reset *),
body :not(.reset, .reset *)::after,
body :not(.reset, .reset *)::before {
  border: 3px solid red;
}
<p><br></p>
<section>
  <div class="reset" contenteditable="true">
    <p><br></p>
  </div>
</section>

Upvotes: 4

Related Questions