Question

I have the following HTML:

<div class="form-square">
     <div class="seven-col">
        Hello World!
      </div>
</div>

And the following CSS:

div.form-square > div {
    padding: 50px;
}

.seven-col {
    padding: 0;
}

Firefox and Firebug is using the first of the two CSS rules. How come “div.form-square > div” has higher precedence than “.seven-col” which is more specific?

Answer 1

div.form-square > div consists of 1 class selector + 2 type selectors (plus a child combinator).

.seven-col consists of 1 class selector.

The number of class selectors is equal, so the comparison is done in type selectors. The first selector has more type selectors so it is more specific.

Specificity is based on the number of each kind of selector in the entire thing, not for the part on the right hand side of the rightmost combinator.

(NB: The first example also has what CSS 2 calls a child selector, but that doesn’t count towards specificity and describes a relationship between elements rather than a feature of an element, which probably why CSS 3 is renaming it to the child combinator).