CODEWITHSUNDEEP
htmlcsscss-selectors
Daniel
Daniel

Reputation: 541

How can I select all elements except a specific class and its descendants?

Using CSS, how can I select all elements except a specific class and its descendants?

For example, I want to select all elements except .my-class and its descendants in the code below. I tried :not(.my-class *) but it doesn't work.

In my project there are many complicated global styles and it's hard to fix them all. So I can't edit all these styles as @Michael_B has answered. I just want to do not apply these styles in .my-class and its descendants without making big changes.

<div>
  <span>a</span>
  <div>
    <span>b</span>
  </div>
  <div class="my-class">
    <span>c</span>
    <div>
      <span>d</span>
      <div>
        <span>e</span>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 115

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371231

Using CSS alone, and before browser implementation of Selectors Level 4, I would say you need multiple selectors:

*:not(.my-class) {
  color: red;
  font-weight: bold;
}

.my-class * {
  color: initial;
  font-weight: normal;
}
<div>
  <span>a</span>
  <div>
    <span>b</span>
  </div>
  <div class="my-class">
    <span>c</span>
    <div>
      <span>d</span>
      <div>
        <span>e</span>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Javier S
Javier S

Reputation: 396

You actually cant. What you can do is select all, select the class and select class descendents.

*{/*styles that will be for all elements except the class and its descendents*/}

.class, .class *{/*reversing styles applied before*/}

Upvotes: 0

Achmad Yogi Prakoso
Achmad Yogi Prakoso

Reputation: 83

you can modify your class display to none by css. If you wish to show them again, change the display to block.

<style>
.my-class{
      display: none;
}
</style>

Upvotes: 0

Related Questions