CODEWITHSUNDEEP
htmlcsscss-selectorsselector
TSR
TSR

Reputation: 20627

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

Upvotes: 3

Views: 614

Answers (3)

Geeky
Geeky

Reputation: 7496

There are no styles for text-nodes You might consider making a tag to appear in a different line using inline-block/block

check the following snippet

#main a{
  display:block;
}
#main *:not(a){
  background:blue;
}
<div id="main">
        <span>Color Blue  </span>  
      
        <a>No color</a>
      </div>

Hope this helps

Upvotes: 0

Khaled Md. Tuhidul Hossain
Khaled Md. Tuhidul Hossain

Reputation: 73

Is this what you need? Please let me know :)

Here is your output:

img

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

Upvotes: 0

Dexter
Dexter

Reputation: 18452

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; }

Upvotes: 3

Related Questions