title: How to target a selector only if it's NOT child of a specific element (so only if it's the root)
body: <p>I don't understand why the following code has not desired behaviour:</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>    .toggle {
        color: red;
      }
      
      :not(.list) .toggle {
        font-weight:bold;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="container"&gt;
        &lt;a href="#!" class="toggle"&gt;Toggle&lt;/a&gt;
        &lt;ul class="list"&gt;
          &lt;li&gt;&lt;a href="#!"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
            &lt;div class="container"&gt;
              &lt;a href="#!" class="toggle"&gt;SubToggle&lt;/a&gt;
              &lt;ul class="list"&gt;
                &lt;li&gt;&lt;a href="#!"&gt;SubLink 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="#!"&gt;SubLink 2&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#!"&gt;SubLink 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#!"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I thought that using <code>:not()</code> would result in applying "bold" only to main "Toggle" link but instead it applis "bold" to all of red ones. Why?</p>
  
  <p><em>Please, note that this code is nested with same class names, I don't want to target specific levels with different css classes, I would like to target elements only with descendant selectors and other operators</em></p>
  
  <p>Here is present also a <a href="https://jsfiddle.net/ldetomi/s249tyur/" rel="noreferrer">jsFiddle</a> to directly try.</p>