CSS2 Multi Classing

Question

I have the following HTML:

<DIV class="foo bar"></DIV>

I'm trying to create a CSS class declaration that matches said element. Looking through the specs on section 8.2.3, I imagine this should've work:

DIV.foo.bar { border-color: black; }

But I've tested on IE and Safari, both doesn't affect the element. Any tricks how to make this work?

Answer 1

There are three issues here potentially.

1. Is your expression and HTML correct?

Your div doesn't have a border width (from what you've posted) so you might not get a border. Try:

<div class="foo bar"></div>

with

div.foo.bar { border: 1px solid black; }

2. Does you div have any height?

Your div (based on what you've posted) has no height. Now on some browsers that'll render as a solid line of the border thickness. Depending on neighbouring elements and border collapse settings (particularly on Firefox more than IE/Safari though), that border may disappear in some circumstances.

3. IE6 doesn't support multiple class selectors correctly

Multiple class selector does not work (correctly) in IE6. See multiple classes and the browser support table.

Usually the trick here is to nest the divs:

<div class="foo"><div class="bar"></div></div>

and then of course:

div.foo div.bar { ... }

Not the same thing obviously but you don't have much choice. The other alternative is to combine the classes manually:

div.foo { background: red; }
div.bar { border: 1px solid black; }
div.foobar { background: red; border: 1px solid black; }

<div class="foobar"></div>

Again, far from ideal. But there's only so much you can do on IE6.

Answer 2

I think it's because you're specifying "border-color: black" without a border-width or border-style. Try setting "border: solid 1px black" and see if that works.

Answer 3

IE6 doesn't support selectors with multiple classes on the same element. The IE-7.js script supposedly fixes that.

Your selector should work fine in IE7+ and recent versions of Safari.