2

About HTML class attribute assigned with two or more class names, that is,

<tag class="a b">....</tag>

I can test it with different browsers -- see tests at http://jsfiddle.net/PP9yf/1/ or this question/answer -- and deduce a common sense rule:

use class="a" if it is defined, or use class="b" if it is defined, or use BOTH if both defined... And, when using both, if they assign same property, the last CSS definition overrides the others.

So, we can interpret for example that class="a b" must be the same as class="b a".

But it is a W3C official interpretation?

Where the W3C standard that say this rule?

PS: I started with this other question, but my motivation is software development. I need this normative answer to develop a software similar to emogrifier, etc.

Example: CssToInlineStyles need this correction... But only need a "correction" IF there are a W3C standand saying that the software is wrong.

Community
  • 1
  • 1
Peter Krauss
  • 13,174
  • 24
  • 167
  • 304

1 Answers1

5

Your findings are correct, and they are official W3C specification.

Two classes on the element itself have the same 'origin'. Also, the selectors have the same 'weight'. Since these and other rules don't determine which style has priority, the order of the style sheet determines the overrule.

See Cascading Style Sheets, level 1, paragraph 3.2 for the rule that specifies this. 3.2.1 through 3.2.4 don't differentiate between any of the two styles. It is 3.2.5 that prevails.

I will cite the rules here, although you may want to read the document to place them in context.

Conflicting rules are intrinsic to the CSS mechanism. To find the value for an element/property combination, the following algorithm must be followed:

  1. Find all declarations that apply to the element/property in question. Declarations apply if the selector matches the element in question. If no declarations apply, the inherited value is used. If there is no inherited value (this is the case for the 'HTML' element and for properties that do not inherit), the initial value is used.
  2. Sort the declarations by explicit weight: declarations marked '!important' carry more weight than unmarked (normal) declarations.
  3. Sort by origin: the author's style sheets override the reader's style sheet which override the UA's default values. An imported style sheet has the same origin as the style sheet from which it is imported.
  4. Sort by specificity of selector: more specific selectors will override more general ones. To find the specificity, count the number of ID attributes in the selector (a), the number of CLASS attributes in the selector (b), and the number of tag names in the selector (c). Concatenating the three numbers (in a number system with a large base) gives the specificity.
  5. Sort by order specified: if two rules have the same weight, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

Summarizing

We can translate the common sense rule itens in the W3C CSS1 rule 3.2 itens,

  • «use class="a" if it is defined, or use class="b" if it is defined, or use BOTH if both defined» is equivalemnt to 3.2.1, «Declarations apply if the selector matches the element in question».

  • «the last CSS definition overrides the others» is equivalemnt to 3.2.5 , «the latter specified wins».

Not changed with new standars: CSS2, CSS2.1 and CSS3 use the same rules.

Community
  • 1
  • 1
GolezTrol
  • 114,394
  • 18
  • 182
  • 210