tags:

views:

166

answers:

5

Is the order, or sequence, of rules in CSS significant?

This post says that it matters: Order of CSS rules matters!!!!!!!!!!

I haven't noticed anything about this in the CSS spec.

Should Calculating a selector's specificity say that if-and-only-if two rules have the same specificity, then it's the later of the two rules (i.e. whichever rule is defined after the previous rule) that's the effective rule?

+3  A: 

if you have two colliding rules on the same css file, the last one will prevail.

Sergio
+4  A: 

Your assumption is correct. A CSS rule defined later overrides a previous definition, unless the rule is less specific than the previous one.

To be more clear about the word "override": it adds to the previous style. If a later rule doesn't specify a specific style, the first one still remains valid.

Philippe Leybaert
+6  A: 

Order does matter. If the specificity is equal, the rule declared later wins out. See Cascading Order in the spec:

...Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Jason Creighton
+3  A: 

If you scroll up a bit on the spec page you posted, you get to this:

6.4.1 Cascading order

To find the value for an element/property combination, user agents must apply the following sorting order:

  1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.
  2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
    1. user agent declarations
    2. user normal declarations
    3. author normal declarations
    4. author important declarations
    5. user important declarations
  3. Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
  4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
Greg
+2  A: 

That is specified in 6.4.1 Cascading order. It's slightly more complex than just the order, as there are also considerations of such things as "!important" and user-versus-author rules. Specificity and the Cascade work together.

NickFitz