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:
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With