How to target a selector only if it's NOT child of a specific element (so only if it's the root)
<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>