In what order are CSS classes applied?

It depends on the order you define the css classes. Say you have:

.a {
    color:red;
}

.b {
    color:blue;
}

In both the <span class="a b">Hi</span> and <span class="b a">Hi</span> cases "Hi" would be blue.

If, however, you had this in your css:

.b {
    color:blue;
}

.a {
    color:red;
}

"Hi" would be red in both cases.

3 thoughts on “In what order are CSS classes applied?”

  1. When there are conflicting rules applying to a given element its pretty complicated to determine which one actually gets applied. To the best of my knowledge this is the order:

    1. Inline styles with an !important declaration 
    2. Non-inline styles with an !important declaration
    3. Inline styles
    4. CSS specificity – another fairly complicated topic but basically how specific a given selector is. Ids are more specific than classes and classes are more specific than tags. If you have a series of cascading classes it would be more specific than a selector with only one of those classes
    5. Everything else being equal the last rule to appear in the source takes precedence.
  2. It apparently depends on the order that CSS is defined in your source files, not the order that the classes are listed in the attribute.  Ex.

    In Firefox, both this:
    data:text/html,<style>.x {color: red;} .y{color: blue;}</style><span class="x y">what color is this?</span>

    and

    data:text/html,<style>.x {color: red;} .y{color: blue;}</style><span class="y x">what color is this?</span>

    generate blue text.

Leave a Reply

Your email address will not be published. Required fields are marked *