CODEWITHSUNDEEP
csscss-selectors
Ali Sheikhpour
Ali Sheikhpour

Reputation: 11045

can not exclude class from css * selector

I want to apply a style on all children of a class except .fixedsize children:

    .inner *:not(.fixedsize){
        max-width:100%
    }
    
    .fixedsize > *{
    max-width:none
    }
    <div class="inner">
        <div>
        <div id="map" class="fixedsize">
           inspect the map here
           <div id="childOfMap">inspect the child of map here</div>
        </div>
        </div>
    </div>

It seems not working. How can I exclude it and all of its children from * selector?

Edit: When I inspect the main element (map) in stackoverflow snippet it has no max-width:100% and this is ok. But in runtime and perhaps a more complex codes when I inspect the map, It has max-width:100% calculated from this * selector.

Upvotes: 0

Views: 1113

Answers (1)

Temani Afif
Temani Afif

Reputation: 272648

The issue is that the :not() selector is more specific, so you need to increase the specifity of the other selector or use !important

.inner *:not(.fixedsize) {
  border:1px solid red;
}
/*Adding not() will make the specifity of this one higher*/
.fixedsize *:not(#randomId) {
  border:none;
}
<div class="inner">
  <div>
    <div id="map" class="fixedsize">
      no border
      <div id="childOfMap">no border <span>here also</span></div>
    </div>
    <div>Content</div>
  </div>
  <div>some other content<span>here</span></div>
</div>

With !important:

.inner *:not(.fixedsize) {
  border:1px solid red;
}
.fixedsize * {
  border:none!important;
}
<div class="inner">
  <div>
    <div id="map" class="fixedsize">
      no border
      <div id="childOfMap">no border <span>here also</span></div>
    </div>
    <div>Content</div>
  </div>
  <div>some other content<span>here</span></div>
</div>

Upvotes: 1

Related Questions