CSS specification weight.

A question confused me long time today has been solved. Its about CSS specifications weight, especially when two or more CSS specifications targeting the same element, which overwriting the others problem.

First the weight list for an CSS element selector:

  • 1000 points for Inline style
  • 100 points for ID selector
  • 10 points for Class selector and pseudo-classes (i.e. :hover, :focus)
  • 1 point for Element selector and pseudo-element (i.e. :before, :after)
  • 0 points for universal selectors (i.e. *, body *)

Then when deciding each element’s style, all the overlapping rules for CSS will be calculated weight. Highest points wins!

That’s it, simple and neat.

But never forget, we still have !important to overrule all the above calculations.