7

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Tales
  • 1,829
  • 3
  • 33
  • 50
  • CSS only supports conjunctions via `XY`, where `X` and `Y` represent selectors (e.g. `.cl2.cl4`), AFAIK. Is it possible to do `:not(.cl2):not(.cl4)` in CSS3? –  Sep 04 '12 at 22:18
  • @pst: [Yes.](http://stackoverflow.com/questions/7403129/combining-not-selectors-in-css) ([see also](http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css)) – BoltClock Sep 05 '12 at 08:40

1 Answers1

12
: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)

Community
  • 1
  • 1
Robin Winslow
  • 10,908
  • 8
  • 62
  • 91
  • 4
    The reason why you have to do this is because `:not(.cl2, .cl4)` is not valid in CSS3, however it is valid in jQuery and proposed for CSS4. See [this question](http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css). – BoltClock Sep 05 '12 at 08:40
  • Thanks I didn't know it was valid jQuery syntax, and I didn't even know CSS4 was a thing. Awesome. – Robin Winslow Sep 05 '12 at 08:41
  • Apparently [CSS4 is not a thing](http://stackoverflow.com/questions/8637901/is-css3-an-official-standard/8637917#8637917) (and that was *my* mistake). I was really referring to Selectors 4 :) – BoltClock Sep 13 '12 at 19:47