HTML and CSS Reference
• Count the number of type selectors and pseudo-elements in the selector
• Ignore the universal selector
IDs are deemed to be very specific (because they are unique to the page) and count as 100 points. Each class, attrib-
ute, and pseudo-class selector counts as 10 points, and each type or pseudo-element selector counts as 1 point.
So, out of the two selectors in the example, header#header > nav[role=”navigation”] gets 112 points
and nav gets only 1!
If the first rule should be more important than the other, I could be more sensible and just make it header nav
(giving it 2 points). This is better for performance and makes CSS more manageable in the future; plus, you can still
clearly see this rule is more specific, without going to the lengths of calculating specificity!
What if both rules are as specific as each other? For example:
In this case, the latter rule always wins.
This attribution of importance is known as the cascade —where the C in CSS comes from.
The !important Rule
If you're the type of character who doesn't play by the rules and that's how you want your CSS to be, let me intro-
duce you to !important .
You've learned the rules of the cascade, but sometimes you might need to make a selector that has less specificity
more important than those with higher specificity.
The !important rule is ideal during development when you just want to see a style applied to the page, regardless
of specificity. It's arguable whether !important should be used in production at all because it's better for per-
formance that you respect the cascade. Here is a good use case, though:
color: red !important;
This approach tends to be used on dynamic sites. Imagine a contact form in which the user hasn't added all the re-
quired details. It's important that the color of the error message be red (above any other color potentially being ap-
plied to this element through other selectors) so that the user knows he's made a mistake and his eye is drawn to it.
The !important rule should start with an exclamation mark ( ! ) and be placed after a property value before the