CSS Selector Priority | Simplicity

Simplicity in CSS

• Browser select which CSS properties(selectors) are appropriate for element. 
• Actually precedence or priority or weight.

How works

• There is an interesting method for calculating simplicity or priority. Like mathematical base
• tag or pseudo-element selectors base 1
• class selectors base 2
• id selectors base 3
• inline selectors base 4
• !important base 5
• 1/0[+](inline) + 1/0[+](class) + 1/0[+](id) + 1/0[+](tag)
• Examples
• div p a{...}
• 0+0+0+3 = 3
• div a .cat{...}
• 0+0+1+2 = 12
• #dog{...}
• 0+1+0+0+ = 100
•  a #dog{...}
• 0+1+0+1 = 101
• !important
• Height priority also expert can use.
• No effect
• *.
• > etc. 

⌚ CSS3 Essentials