Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Css :not is not working

As I would expect, the background of the text "Color Blue" should be colored blue and not the "No color". However, none of them are colored.

    <html>
    <style>
    #main > :not(a)  {
        background: blue;
    }
    </style>
    </head>
    <body>
      <div id="main">
        Color Blue     
        <br>
        <a>No color</a>
      </div>
    </body>
    </html>

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

enter image description here

like image 609
TSR Avatar asked Jul 02 '26 19:07

TSR


1 Answers

Your CSS selector #main > :not(a) says match "any elements that are a direct child of #main, except for a elements".

Unfortunately, "Color Blue" is not in a child element, so your CSS selector doesn't match it. Equally unfortunate - you can't directly target text nodes (see: Is there a CSS selector for text nodes?), so you can't just style the "Color Blue" text

Instead, perhaps you can style the whole of #main, but then change the background color of the a to be something else? e.g.

#main { background: blue; }
#main > a { background: white; }
like image 191
Dexter Avatar answered Jul 05 '26 13:07

Dexter



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!