Css :not is not working

Question

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:

To confirm: are you trying to apply background styling to just the "Color Blue" text. Would applying a background style to the whole div, and then setting the background on "no color" to be another color work? — Dexter, Oct 23 '16 at 11:00
yes indeed. And I don't want to change the html code if possible. Just the text "color blue" — TSR, Oct 23 '16 at 11:01
What do you want the final output to look like? Does it not work to have a blue background on eveything in #main, except for the link? — Dexter, Oct 23 '16 at 11:04

score 3 · Answer 1 · edited May 23 '17 at 12:33

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

score 0 · Answer 2 · edited Oct 23 '16 at 11:44

0

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

Here is your output:

a {
  background: white;
}
 :not(a) {
  background: blue;
}

<html>
<body>
  <div id="main">
    Color Blue
    <br>
    <a>No color</a>
  </div>
</body>
</html>

edited Oct 23 '16 at 11:44

Luka Kerr

4,161
7
39
50

answered Oct 23 '16 at 11:42

Khaled Md. Tuhidul Hossain

73
2
10

score 0 · Answer 3 · answered Oct 23 '16 at 11:49

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

Css :not is not working

3 Answers3