CODEWITHSUNDEEP
htmlcsssasscss-selectors
JD Solanki
JD Solanki

Reputation: 988

How to omit applying styles from certain class in CSS

I am making a PR to one of OSS project but I stuck at thing where I want to perform following:

<div class="vp-doc">
  <p>styled</p>
  <div class="vp-raw">
    <p>not styled</p>    
    <div>
      <p>not styled</p>    
    </div>
  </div>
</div>

Let's say I have styles for all p tags placed inside .vp-doc but exclude if any ancestor has .vp-raw class.

I tried below but didn't worked:

.vp-doc {
  :not(.vp-raw) {
    h1 {
      color: red;
    }    
  }
}

NOTE: p elements can be nested deeper.

Thanks to @fabrizio-calderan I was able to get closer but with all: revert it also removes the other styles as shown in snippet.

p {
  font-weight: 600;
  color: green;
}

.vp-doc p {
  color: red;  
}

.vp-raw p {
  all: revert;
}
<div class="vp-doc">
  <p>styled</p>
  <div class="vp-raw">
    <p>not styled</p>
    <div>
      <p>not styled</p>
    </div>
  </div>
</div>

Real-life scenario:

I am working on VitePress where it has vp-doc class which adds styling for markdown (h1, p, tags etc). However, When we use component for demo in docs component's h1, p, etc tags also get styling. I opened an issue in the repo and working on it. We decided to add .vp-raw class with shown structure to avoid adding styles by vp-doc. It's kind of isolation from vp-doc styles but other styles (added by component) should stay.

Thanks.

Upvotes: 1

Views: 93

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

You could apply a style for .vp-doc p and revert all the properties for .vp-raw p

.vp-doc {
  color: cornflowerBlue;
}

.vp-doc p { 
   color: yellowgreen; 
   font: 600 2rem system-ui; 
}

.vp-raw p { 
  /* resets the property to its inherited value 
     if it inherits from its parent or to the default 
     value established by the user agent's stylesheet */ 
  all: revert; 
}

/* or 
  .vp-doc .vp-raw * {
    all: revert; 
  }
*/
<div class="vp-doc">
  <p>styled</p>
  <div class="vp-raw">
    <p>not styled</p>    
    <div>
      <p>not styled</p>    
    </div>
  </div>
</div>

in this example revert applies the initial font-weight, font-size and font-family but the color of the paragraph is inherited from its parent.

Upvotes: 3

Related Questions