Question

I am having to parse the css of html document sets for those rules that have float:left/right.

I’ve figured out how everything works when there is a set of nested DOM elements each of which has at most one class. The specificity of the rule is based on the selector number calculated, id first, then class, then tag elem. In case of ties, choose the rule which comes last.

So the idea of specificity is that at most one rule is chosen based on the specificity of the selector in matching the DOM tag element.

What do I do when there are multiple classes, not only at the deepest DOM child, but at parent levels. Multiple classes in simple form choose and apply multiple rules. But I just can’t figure out the complete set of guidelines for determining how specificity interacts with this. E.g. normally the specificity chooses one rule, highest specificity. But with multiple classes in the terminal DOM element, in the simple cases demonstrated on the internet, the multiple rules selected by multiple classes have the same specificity. But I can see much more complex scenarios, and don’t know how to choose the rules.

Here’s a case:

p.cls1 {
}
div#id1 p.cls2 {
}
.cls3 {
}

Html:

<div id="id1"><p class="cls1 cls2 cls3">...

All 3 classes get selected even though all 3 have different specificity numbers. However, I could make the problem worse by give multiple classes to the outer div. Couldn’t find any information in the css 2.1 spec that says what’s supposed to happen, and how multiple classes select multiple rules, in spite of specificity.

Andy

Answer 1

It’s a little difficult to determine what you’re actually asking here. A specific example would help.

But in general the order of style precedence from highest to lowest is by:

1. Inline styles
2. Included styles (same document)
3. Externally referenced styles

Within all of those, the style that’s listed last has higher precedence, assuming the specificity is the same. However, a style that’s at a higher precedence level (such as an inline style) will always overwrite the others regardless of specificity. So, an inline style on an element will always overwrite the styles in the included style sheet.

Here’s more info, which you may already know about specificity… http://www.htmldog.com/guides/cssadvanced/specificity/

The actual specificity of a group of
nested selectors takes some
calculating. Basically, you give every
id selector (“#whatever”) a value of
100, every class selector
(“.whatever”) a value of 10 and every
HTML selector (“whatever”) a value of
1. Then you add them all up and hey presto, you have the specificity
value.

This all having been said, !important adds another layer where the same rules apply, just !important is given precedence over all non-!important styles.

UPDATE:
Your example is a bit curious, and I think you’re misunderstanding specificity. Specificity does not mean that a class that applies to the same element as another class wholly overwrites it. What it means instead is that “If there’s style attributes that are the same, the one with the higher specificity overwrites the others.”

In your example, an attribute on cls2 that matches any of the other class styles will overwrite them. However, if there’s no style conflicts, there’s no problem! It’ll just take all of the styles.

Perhaps it’ll help to think of it like assigning variable on any old object. There’s multiple ways to reference the variable, but your specificity defines your execution order. The assignment that sets the variable last is what it is when the object actually gets rendered.