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.
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.