title: can not exclude class from css * selector
body: <p>I want to apply a style on all children of a class except <code>.fixedsize</code> children:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .inner *:not(.fixedsize){
          max-width:100%
      }
      
      .fixedsize &gt; *{
      max-width:none
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="inner"&gt;
          &lt;div&gt;
          &lt;div id="map" class="fixedsize"&gt;
             inspect the map here
             &lt;div id="childOfMap"&gt;inspect the child of map here&lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It seems not working.  How can I exclude it and all of its children from * selector? </p>
  
  <p><strong>Edit:</strong>
  When I inspect the main element (map) in stackoverflow snippet it has no <code>max-width:100%</code> and this is ok. But in runtime and perhaps a more complex codes when I inspect the map, It has <code>max-width:100%</code> calculated from this * selector.</p>