не может исключить класс из css * селектора

Question

Я хочу применить стиль ко всем детям в классе, кроме .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>

Кажется, не работает. Как я могу исключить его и всех его детей из * селектора?

Изменить: Когда я проверяю основной элемент (map) во фрагменте stackoverflow, у него нет max-width:100%, и это нормально. Но во время выполнения и, возможно, в более сложных кодах, когда я проверяю карту, она вычисляет max-width:100% из этого * селектора.

Answer 1

Проблема в том, что селектор :not() более специфичен, поэтому вам нужно увеличить специфичность другого селектора или использовать !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>

С !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>