CSS specifications provide a way to calculate the actual specificity of a selector by providing some numerical values as reference. Although this is a very useful method, it's somewhat difficult to remember, especially when dealing with multiple CSS selectors on large CSS files. For that reason, in this post I'm going to try to summarize the most common combinations of selectors in order to provide a visual memo that could be used later as a reminder.
| Rules | Winner |
|---|---|
* {} | div {} |
div {} | #test {} |
div {} | .test {} |
.test {} | #test {} |
div {} | body div {} |
div {} | body > div {} |
.test {} | div[class="test"] {} |
div {} | div:first-child {} |
div {color: red !important;} | |