17

I have a table with some rows:

<table>
    <tr class="even"><td>tr0</td></tr>
    <tr><td>tr1</td></tr>
    <tr class="even"><td>tr2</td></tr>
</table>

I have a CSS rule (rule1) for even rows:

.even{
    background-color: blue;
}

I have another rule (rule2) for override the bgcolor of any row:

.override, .override.even{
    background-color: green;
}

The weird thing is in IE9 all even rows (with no override class) are green!
Developer tools shows this for even rows:

enter image description here

In these two conditions IE do the job correctly:

If I rewrite rule2 like this:

.override, .override .even{ ... }

If I move rule2 above rule1:

.override, .override.even{ ... }
.even { ... }

Question is what's the difference between .override.even and .override .even?

EDIT:

Thanks for replies. Another question which I forgot to ask is why IE shows the even rows green?

Improve this question
8
  • 1
    .override .even = Select any element which has a class of "even" that is a decendant of any element that has a class of "override"
    – Jawad
    Commented Oct 21, 2011 at 19:40
  • 2
    .override.even = Select any element that has a class of "override" or/and "even"
    – Jawad
    Commented Oct 21, 2011 at 19:42
  • You need to have some conflicting code somewhere. When I test it, the rows remain blue: jsfiddle.net/Guffa/e3w4q
    – Guffa
    Commented Oct 21, 2011 at 19:42
  • 2
    @Jawad: That's not quite right, it will only select elements with both classes, not "and/or".
    – Mog
    Commented Oct 21, 2011 at 19:43
  • I am sure I read it somewhere. I could be wrong. Let me fish!
    – Jawad
    Commented Oct 21, 2011 at 19:49

5 Answers 5

Reset to default
29

Spacing in between class specifiers means a ascendant -> descendant relationship.

The rule:

.test .heading { font-weight: bold; }

Would apply to the <p> element here:

<span class="test"><p class="heading">Something</p></span>

The lack of space means that the element must have both classes for the rule to apply.

The rule:

.heading.major { color: blue; }

Would apply to the <p> element here:

<p class="heading major">Major heading</p>
Improve this answer
2
  • Thanks. But why in IE all even rows are green instead of blue?
    – Pedram Behroozi
    Commented Oct 21, 2011 at 19:44
  • 4
    spacing does not mean parent -> child relationship. It means acendant -> decendant relationship. A parent is necessarly a ancendant but a ancednat is not necessirly a parent. A child is necessirly a decendant but a desendant is nor necessirly a child.
    – Jawad
    Commented Oct 21, 2011 at 19:45
6

Both answers are right, but they don't explain, why IE shows both rows green.

It's because IE has "standard" and "quirks" mode. To make multiple classes selectors work, you need to use proper DOCTYPE at the beginning of the file.

You are in "quirks" mode now and IE don't support multiple selectors, it sees only latest class. So it sees this and rows are green:

.even {
    background-color: blue;
}
.override, .even {
    background-color: green;
}

Put 

<!DOCTYPE html>

(or another DOCTYPE) at the beginning of the file and both rows are going to be blue as expected.

Improve this answer
3
  • How do you know he is in quirks mode?
    – Jawad
    Commented Oct 21, 2011 at 19:56
  • Because he has these two rows green and multiple class selectors are not working for him. These two rows should be blue as they are in other browsers.
    – Petr
    Commented Oct 21, 2011 at 20:03
  • 2
    +1 This is most likely the reason. Running the fiddle that I linked to in the comments in quirks mode renders the lines with green background.
    – Guffa
    Commented Oct 21, 2011 at 20:04
1

See the W3C [CSS] Selector (Level 3) "Recommendation":

.override .even is two simple selectors separated by a space (which is the descendant combinator, CSS is whitespace-sensitive):

At times, authors may want selectors to describe an element that is the descendant of another element in the document tree (e.g., "an EM element that is contained within an H1 element"). Descendant combinators express such a relationship. A descendant combinator is whitespace that separates two sequences of simple selectors. A selector of the form "A B" represents an element B that is an arbitrary descendant of some ancestor element A.

This selector will match elements that have the class even if and only if there exists an ancestor -- not necessarily the parent! -- element with the class override. (Unlike characters in some movies, an element is never it's own ancestor ;-)

.override.even is a simple selector sequence:

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

A simple selector sequence is evaluated as the conjunction of the individual simple selectors applied to the same element: that is, it will only match elements with both the override and even classes applied.

Happy coding.

Improve this answer
0

.override .even is interpreted as "some element with an 'override' class, with another element with a .even class nested within. It's basically the same as ul li, but applying to CSS classes.

override.even is interpreted as "some single element with BOTH override AND even classes".

Improve this answer
0 
<div class="class1">
   <div class="class2">
       <p>test1</p>
    </div>
</div>

If this type coded added than use space between to class like .class1 .class2 

<div class="class1 class2">
   <p>test2</p>
</div>

If this type coded added than don't use space between to class like .class1.class2

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.