CSS Precedence and Specificity

CSS precedence and specificity is going to be a concept I’ll have to work through in my head. The general concept of CSS is that defined styles will be chosen by precedence of whichever is is defined last (aka. whichever is last in the cascade – I guess it’s called Cascading Style Sheets for a reason =p).

In my prior copy/paste and hack/slash exploration into CSS, I’ve always been confused about why some styles aren’t changed when I try to define them.

I found this pretty helpful article on CSS-Tricks that sheds some light on the concept of specificity and precedence of CSS.

specificity-calculation-base

Briefly (you can read more at the article linked above):

  • If an element has inline styling, it automatically gains the most specificity (1,0,0,0 points)
  • Each ID value, applies 0,1,0,0 points
  • Each class value (or pseudo-class or attribute selector), applies 0,0,1,0 points
  • Each element reference, applies 0,0,0,1 point.

Duncan Leung

Front End Developer at iHerb.com

Irvine, CA

Subscribe to Duncan Leung: Javascript and Front End Development

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!