CODEWITHSUNDEEP
htmlcsscss-selectorsoperator-precedence
mrmclovin
mrmclovin

Reputation: 1123

CSS child selector higher precedence than class selector?

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?

Upvotes: 7

Views: 3751

Answers (3)

Quentin
Quentin

Reputation: 943561

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).

Upvotes: 13

Jason Gennaro
Jason Gennaro

Reputation: 34855

.seven-col has 1 class = +1

div.form-square > div has 2 elements and 1 class = +3

Check it out with this CSS specificity calculator: http://www.suzyit.com/tools/specificity.php

Upvotes: 0

Evan Trimboli
Evan Trimboli

Reputation: 30082

Correct, the first rule is more specific than the second, because a class only selector has a fairly low priority.

Upvotes: 0

Related Questions