Specifity and class selector (cascade)

Question

Hello

Suppose we want to find out what will be the color property of particular <h2> element.

1) When trying to figure out how specific a selector is, one of the rules says that selector with greater number of classes is more specific than selector with fewer classes. Thus, in the following example the color of particular <h2> should be green ( this example is taken from some web site ):

.one .two .three .four .five .six .seven 
{
    color: green;
}


.eight .nine .ten
{
    color: blue;
}

a) First of all, if I specify more than one class in a selector, then it doesn’t work…in other words, text won’t be either green or blue. Any idea why it doesn't work?

b) Ignoring the fact that selector won’t work if it contains more than one class: Are classes .two .three .four .five .six .seven descendants of class .one or is our particular <h2> element a member of all those classes?

2) Another rule says that if we selector with greater number of IDs is more specific than selector with fewer IDs. So in the following example the color of particular <h2> should be green:

#one #two # three #four #five #six #seven
{
   color: green;    
}


#eight #nine #ten
{
   color: blue;
}

a) The above claim makes sense only if #two is a child of one#, #three a child of #two and a grandchild of #one etc?! Correct?

3) I assume more specific selector defined in user’s css file is chosen over less specific selector defined in author’s css file?

thanx

EDIT:

The first CSS rule applies to all elements with the class of "seven", which have an ancester with the class of "six", which in turn have an ancestor with the class "five" and so on.

Uhm, you mean the rule applies to an element E7, but only if : - E7 is member of class .seven and descendant of element E6 - E6 is member of class .six and descendant of element E5 - E5 is member of class .5 and descendant of element E4 etc ?

May I also ask if my assumption about my second question ( in initial post ) is correct?

Answer 1

When you put spaces between class selectors, it means "descendant" of...

instead, you should put them all togheter :

.one.two.three.four.five.six.seven 
{
    color: green;
}


.eight.nine.ten
{
    color: blue;
}

Which means that an element with ALL these classes will get colored, instead that the descendant of all the elements with the classes in that order.

Answer 2

The first CSS rule applies to all elements with the class of "seven", which have an ancester with the class of "six", which in turn have an ancestor with the class "five" and so on.

The raw rules you posted won't match any h2 tags unless they have the class "green" and all those ancestor elements. I think your example is pretty damn complex because the specificity rule only comes into play when you have a massive set of at least eight nested elements!

A simpler example would be this, which targets the h2 tag with three different rules (in no particular order):

h2 { color: red; }
.one h2 { color: green; }
.two .three h2 { color: blue; }

The h2 in this example will be red:

<h2>Heading 2</h2>

The h2 in this example will be green:

<div class="one">
    <h2>Heading 2</h2>
</div>

The h2 in this example will be blue. Even though .one is the nearest ancestor, .two and .three mean the latter CSS rule is the one that applies.

<div class="two">
    <div class="three">
        <div class="one">
            <h2>Heading 2</h2>
        </div>
    </div>
</div>

A similar process applies for IDs, except IDs have 10 times the "weight" of classes. Take a look at the w3 specs for more details. It's a pretty tough topic to get your head around, but I hope that makes everything a little clearer!

Honestly, this situation doesn't crop up that often - I try to keep my CSS rules fairly generic and avoid lots of nested elements with different class names. If you keep having to work out specificity, then your HTML is probably getting too complex!