Order in which CSS styles are applied


(Tim) #1

Hi there,

Apologies in advance if this is an ignorant request but is there a reason why the CSS rules under Settings / Code / CSS aren’t applied last? It would be great to be able to overwrite styles with out having to use !important all the time.

Thanks for such a great program!
Tim


(Doug Bennett) #2

They should be that way already. It could be dependent on the theme you are using but I haven’t seen one yet that didn’t work that way.

If you’re having to use !important, then it is probably not the order of the style sheets, but has more to do with CSS Specificity and the CSS selector you are using. If two CSS selectors apply to the same element, the one with higher specificity wins.

The four categories of Specificity hierarchy

  1. Inline styles (Presence of style in document).

  2. IDs (# of ID selectors).

  3. Classes, attributes and pseudo-classes (# of class selectors).

  4. Elements and pseudo-elements (# of Element (type) selectors).

As a general rule if you find your self-using !important then you probably need to look at the selector you are using.
If you want more information on CSS Specificity check out this article in Smashing Magazine:


(Tim) #3

Great article, thanks. I have struggled with the specificity rules in the past, that’s probably all it is.

Given almost every element has a page specific ID (I.e. #page8_blah) it gets a little out of hand trying to apply styles globally when the CSS selectors each contain a unique ID.


(system) #4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.