CSS multiple class selection

Question

There is a webpage containing this fragment of HTML: <div class="a b"></div><div class="a"></div>. How can I hide the second div with CSS, leaving the first one visible? Please note, that I cannot add any other classes, as well as the visibility of the first div changes (sometimes relative, sometimes absolute) and it does not depend on me.

What have you tried so far? I can't see why you'd be stuck on this. `.b{display:none}` is not what you want? — Wesley Murch, Mar 09 '12 at 20:44
possible duplicate of [Can you target an element with CSS only if 2 classes are present?](http://stackoverflow.com/questions/640996/can-you-target-an-element-with-css-only-if-2-classes-are-present) — Wesley Murch, Mar 09 '12 at 20:46
sorry for mistake. I wanted to hide the second one. Corrected the question — burtek, Mar 09 '12 at 20:46
So you've tried nothing and you're already out of ideas? Hmmm... — Wesley Murch, Mar 09 '12 at 20:48
The problem is, that the first div never has the same visibility - sometimes it's absolute, sometimes relative and it does not depend on me... — burtek, Mar 09 '12 at 20:50
Is there some reason why you can't add a class 'c' to the second DIV and hide it via that? — jmbertucci, Mar 09 '12 at 21:51

score 3 · Accepted Answer · answered Mar 09 '12 at 20:51

3

You can hide both then show the one that has both classes a and b

.a {display: none;}
.a.b {display: block;}

If the mark-up won't change you can hide the second div with the following:

.a.b + .a {display:none;}

This says anything with the class a that directly follows anything with both classes a and b should be hidden.

answered Mar 09 '12 at 20:51

ajcw

23,604
6
30
47

As written in comment to the question, the first div never has the same visibility - sometimes it's absolute, sometimes relative and it does not depend on me. Is there maybe any 'not'-like statement in css? – burtek Mar 09 '12 at 20:52
@burtek: note that questions (and answers) on SO should be standalone. It shouldn't be necessary to read comments in order to understand either. Please put all necessary information in the question itself. – outis Mar 10 '12 at 14:51

Brian Ray · Answer 2 · 2012-03-09T20:56:46.393

2

Very easy. Just try this

.b {display:none;}

edited Mar 09 '12 at 20:56

answered Mar 09 '12 at 20:44

Brian Ray

1,482
3
20
20

score 2 · Answer 3 · answered Mar 09 '12 at 20:45

2

div.a.b{display:none} /*take note, no spaces between .a and .b to signify that the div has both*/

or, since the first contains b

div.b{display:none}

answered Mar 09 '12 at 20:45

Joseph

117,725
30
181
234

score 0 · Answer 4 · answered Mar 09 '12 at 20:45

Just create a selector for class b:

.b { display: none; }

If you require that only items with class a should be hidden when they also have class b, you can use the multiple class selector by joining the two class selector (no blank):

.a.b { display: none; }

score 0 · Answer 5 · answered Mar 09 '12 at 23:26

0

What do you mean sometimes the visibility is absolute or relative? visibility can only be hidden or visible on a div.

Here is what you need for your updated Question

.a { display: hidden; } 
.b { display: inline !important; }

answered Mar 09 '12 at 23:26

Andrew

1,963
3
25
35

score 0 · Answer 6 · edited May 23 '17 at 12:03

CSS3 defines a negation pseudo-class:

.a:not(.b) {
    display: none;
}

However, it only gained support in IE 9, so the current typical cross-browser solution is to set the property for all elements (including the ones that you don't want to match), then create another rule with a more specific selector that restores the original styling. This still has problems in IE 6 and earlier, as they only consider the last class when multiple classes for a single element are used.

.a {
    display: none;
}
.a.b { /* IE6 will treat selector as '.b' */
    display: block;
}

Note that if there are already rules with a more specific selector that match the elements you don't want to touch, or if the style is set inline (which shouldn't be done outside of a script manipulating the page), you don't need to add the second rule, since .a has such a low specificity.

CSS multiple class selection

6 Answers6