CODEWITHSUNDEEP
csscss-selectors
destiny
destiny

Reputation: 107

CSS :not() selector affects other elements, what am I missing?

I have the following test code: 

<html>
<head>
    <style type="text/css">
        #test, .random-class { font-weight:bold; }
        #test, .random-class:not('.another-class') { color:red; }
    </style>
</head>
<body>
    <div id="test">hello world</div>
</body>
</html>

This produces the following output:

enter image description here

In my understanding, hello world should be bold and red, but it's only bold. I expected the second rule to affect

What am I missing here? Why is the second rule not applied?

Upvotes: 0

Views: 161

Answers (3)

Matt Fellows
Matt Fellows

Reputation: 6522

The second rule is not applied because there's an error in your sytax, which breaks the entire rule, not just the selector that is broken.

:not(.abother-class) is teh correct syntax (without the quotes.

If you separated your rules into two you'd get your desired effect, as would fixing the error e.g. either of these two solutions should work:

#test {color: red}
.random-class:not('.another-class') {color: red} /*This is still broken, but doesn't effect the above rule now*/

or

#test, .random-class:not(.another-class) {color: red} /* fixed*/

Upvotes: 1

Mike Donkers
Mike Donkers

Reputation: 3699

You don't need the quotes around the class in your :not() selector, if you change it so it becomes: 

#test, .random-class:not(.another-class) 
{ 
    color:red; 
}

It will work as you expect it to

Take a look here for a demo

Take a look here for the docs on the :not() selector

Mentioned by @KWeiss in the comments:

Specifically the quotes are making the selector invalid so the rule is not applied

Hope this helps!

Upvotes: 3

Mikl
Mikl

Reputation: 109

You dont need to use ' in :not

#test, .random-class { font-weight:bold; }
#test, .random-class:not(.another-class) { color:red; }

Upvotes: 1

Related Questions