Css - targeting certain classes

Question

Possible Duplicate:
CSS Selector that applies to elements with two classes

I've got the following:

<div class="green-arrow current-plan span4">
     <img src="/images/assets/green-arrow.jpg">
</div>

<div class="green-arrow plan-above span4">
     <img src="/images/assets/green-arrow.jpg">
</div>

And I want to target plan-above so it's display: none; without affecting other instances of plan-above (which are not green-arrow).

This has been asked before, search for "css multiple classes" — BoltClock, Jan 25 '12 at 14:56

score 4 · Accepted Answer · answered Jan 25 '12 at 14:57

4

div.green-arrow.plan-above {
    display: none;
}

answered Jan 25 '12 at 14:57

Zoltan Toth

46,981
12
120
134

Note: Hideously broken in IE6. – Quentin Jan 25 '12 at 14:58
1

@Quentin Say something that isn't broken in IE6. ;) But seriously, IE6 is deprecated and no longer supported so I see no reason to (if not specifically requested) support that browser in your code. – Filip Jan 25 '12 at 15:02
1

@Filip — Enough people are still supporting it to make it worth mentioning when example code won't work in it. In ones own code, it is fine to decide not to support IE6. When teaching, on the other hand, it is a little more complex. – Quentin Jan 25 '12 at 15:05
2

I went into grotesquely inordinate amounts of detail about IE6 here: http://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes If anybody is concerned about IE6, you can go ahead and vote to close future questions as duplicates of that specific one. – BoltClock Jan 25 '12 at 15:06

score 1 · Answer 2 · answered Jan 25 '12 at 15:02

1

Try this:

div.green-arrow.plan-above {
    display: none;
}

Further you can use CSS3 to excluded several classes comma seperated

div.plan-above:not(.class, #id) {
  //mark up
}

answered Jan 25 '12 at 15:02

Jannis M

745
1
4
15

1

Still wrong, `:not()` in CSS3 **doesn't** allow comma-separated classes. – BoltClock Jan 25 '12 at 15:07
There is no such specification, but it works in FF3. Try it yourself – Jannis M Jan 25 '12 at 15:08
Why are you using *Firefox 3*? Firefox 9 is the current stable version. – thirtydot Jan 25 '12 at 15:11
1

It only works in Firefox 3 because it's a bug. It was fixed in I believe version 3.1 or 3.5. – BoltClock Jan 25 '12 at 15:11
I don't use Firefox. I'm stuck on Chrome. Read about it here: [Link](http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/) – Jannis M Jan 25 '12 at 15:14
1

I've seen that article before, but it's really old. I've just [left a comment on it](http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/comment-page-2/#comment-164654) to address this misconception, even though I doubt anybody reads comments on an old article anymore. – BoltClock Jan 25 '12 at 15:24

Css - targeting certain classes

2 Answers2