[CSS3] Understand CSS Selector Specificity

It is hard to explain css selector specificty, to easy way to understand it is by playing around with it.

 

To remember some rules can be helpful:

• inline style > ID selector > Classes, attributes, and pseudo-classes > Elements and pseudop elements

Which means if you have inline style in your html, even you try to use ID selector, it cannot override the inline style. That's why people recommend don't use inline style because it is hard to override.

 

• If one combine selector A has more specificty than the other B, A will override B, even B comes later.

First one is the winner. 

 

• If A and B has the same specificity, B comes later win.
• !Important overrides all the rest. This is the most powerful one, but again it is hard to override in the future if needed, recommended not to use it as much as possible.