Css :not is not working
<p>As I would expect, the background of the text <code>"Color Blue"</code> should be colored blue and not the <code>"No color"</code>. However, none of them are colored.</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-html lang-html prettyprint-override"><code>    &lt;html&gt;
    &lt;style&gt;
    #main &gt; :not(a)  {
        background: blue;
    }
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="main"&gt;
        Color Blue     
        &lt;br&gt;
        &lt;a&gt;No color&lt;/a&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>How can I color the bg of the text "Color blue" in blue <strong>without changing</strong> the html code?
Here is the expected output as requested:</p>

<p><a href="https://i.stack.imgur.com/Tl0fV.png" rel="nofollow"><img src="https://i.stack.imgur.com/Tl0fV.png" alt="enter image description here"></a> </p>