CSS selector with class a but not class b

Question

I've tried all sorts of things but I think i'm getting too complicated and even managed to get chrome to hang with my selector. I'm sure theres a simple way to do this

Select classa but only when theres no classb and ignore the last instance of it

<div class="container">
    <div class="classa classb"></div> <!-- Dont Select -->
    <div class="classa"></div>  <!-- Select -->
    <div class="classa"></div>  <!-- Dont select last instance -->
</div>

score 31 · Accepted Answer · answered May 27 '12 at 10:02

31

I believe you can do this with CSS3 using the :not() selected (example here)

div.classa:not(.classb):not(:last-child) {}

However, as you know, not many browser supports this, so Javascript might be an easier way...

answered May 27 '12 at 10:02

LeeR

1,563
10
29

Also, you won't be able to exclude the last `.classa` if it's not the last child. See http://stackoverflow.com/questions/10230416/is-it-possible-using-current-browsers-to-use-pseudo-classes-to-detect-first-and/10230466#10230466 – BoltClock May 27 '12 at 10:12
Yes this is a problem ive been getting testing – Tarang May 27 '12 at 10:13

Simone · Answer 2 · 2012-05-27T10:06:13.843

5

.classa:not(.classb):not(:last-child) {
    /* rules */
}

Tested on Firefox 12, Chrome 19, Safari 5 and Opera 10. Unfortunately it doesn't work on (...guess who?) IE.

edited May 27 '12 at 10:06

answered May 27 '12 at 10:00

Simone

18,870
12
73
98

Because you haven't upgraded your IE. – BoltClock May 27 '12 at 10:06
I tested on IE 9 - doesn't work. Even if it worked, most of people still uses older versions... – Simone May 27 '12 at 10:12
Make sure you're testing in standards mode. IE9 supports these selectors fully, but only in standards mode. – BoltClock May 27 '12 at 10:15
Yeah, you're right. I was testing without ` `. It works now – Simone May 27 '12 at 10:20

score 1 · Answer 3 · answered May 27 '12 at 10:01

1

Try:

.classa:not(.classb):first-child {
    background: red;
}

This won't work in IE 7 or 8 though.

answered May 27 '12 at 10:01

Kai Sellgren

23,990
8
69
83

This is wrong, because the first child is a `.classa.classb`. – BoltClock May 27 '12 at 10:07

score 0 · Answer 4 · answered May 27 '12 at 10:00

0

With CSS3 pseudo classes:

.classa:not(:last-child):not(.classb) {
  // some rules...
}

answered May 27 '12 at 10:00

ldiqual

15,027
6
48
89

CSS selector with class a but not class b

4 Answers4