Menu
I have this code which makes every paragraph with class different than "cl2" red.
<head>
<style type="text/css">
p{ color:#000000; }
:not(.cl2){ color:#ff0000; }
</style>
</head>
<body>
<p class="cl1">This is a paragraph.</p>
<p class="cl2">This is second paragraph.</p>
<p class="cl2">This is third paragraph.</p>
<p class="cl3">This is fourth paragraph.</p>
<p class="cl2">This is fifth paragraph.</p>
<p class="cl2">This is sixth paragraph.</p>
<p class="cl4">This is seventh paragraph.</p>
<p class="cl5">This is eigth paragraph.</p>
<p class="cl1">This is nineth paragraph.</p>
</body>
How can I extend my :not selector to ignore for example classes "cl2" AND "cl4"? I trided: :not(.cl2, .cl4){ color:#ff0000; } but it doesn't work.
851
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state)
A type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class is a simple selector.
:not(.cl2):not(.cl4){ color:#ff0000; }
http://jsfiddle.net/nottrobin/WFwtP/
Note there are differences between the :not selector in CSS3 vs jQuery - due to converge in the CSS4 spec (thanks @BoltClock)
55
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
