What is the difference between:
.classA.classB {
border: 1px solid; }
.classA .classB {
border: 1px solid; }
?
views:
125answers:
4In certain situations a space is *required* (such as `div span`, i.e. all spans contained in divs). Thus, it is most consistent to always include a space.
Noldorin
2009-07-14 15:55:58
-1 one for wrongness.
Williham Totland
2009-07-14 15:56:37
This is wrong..a.b targets all elements with class="a b".a .b targets all elements with class="b" whose parents have class="a".
Sam DeFabbia-Kane
2009-07-14 19:40:07
+23
A:
.classA.classB refers to an element that has both classes A and B (class="classA classB"); whereas .classA .classB refers to an element with class="classB" descended from an element with class="classA".
Edit: Spec for reference: Attribute Selectors (See section 5.8.3 Class Selectors)
Williham Totland
2009-07-14 15:55:22
Thats what I had suspected. Do you know if IE6 handles .classA .classB (with space) correctly?
2009-07-14 15:58:07
David
2009-07-14 15:58:11
@retrohound Just tried it - IE6 handles both cases (with space and without) correctly
jimyi
2009-07-14 15:59:41
I'm glad you nailed this. This is often misunderstood. They have 2 totally different meanings, as you mentioned.
Justin Lucente
2009-07-14 15:59:42
@retrohound: Yes, IE6 should handle this correctly. I don't have a box to test this on at the moment, though.
David
2009-07-14 15:59:46
A:
Williham's answer is the only correct one. The specs can be found here:
Philippe Leybaert
2009-07-14 16:04:06
+2
A:
A style like this is far more common, and would target any type of element of class "classB" that is nested inside any type of element of class "classA".
.classA .classB {
border: 1px solid; }
It would work, for example, on:
<div class="classA">
<p class="classB">asdf</p>
</div>
This one, however, targets any type of element that is both class "classA", as well as class "classB". This type of style is less frequently seen, but still useful in some circumstances.
.classA.classB {
border: 1px solid; }
This would apply to this example:
<p class="classA classB">asdf</p>
However, it would have no effect on the following:
<p class="classA">fail</p>
<p class="classB">fail</p>
(Note that when an HTML element has multiple classes, they are separated by spaces.)