CSS Priority

README.md

CSS declarations (ways to define CSS)

• External styles in the DOM (<link rel="stylesheet" href="style.css">).
• Internal styles in the DOM (<style>).
• Inline styles in HTML elements (<div style="color: red;">).
• External styles in CSS area (@import).

CSS hierarchy (first is highest priority)

1. User styles with !important.
2. Author styles with !important.
3. Author styles (see CSS declarations).
4. User styles (users own stylesheets, addons, Developer Tools).
5. User-agent styles (browser defaults).

Selector specificity (calculated)

• 1000 points for the inline style attribute (<div style="color: red;">).
• 100 points for every ID (#identifier).
• 10 points for every class (.class), attributes ([attributes]) and pseudo-classes (:focus).
• 1 point for every element name (div) and pseudo-elements (:before).

Conflicting rules

The latest rule defined in the DOM is the one that counts.

p { color: red; }
p { color: green; }

In the example above, every paragraphs would appear in green text.

Link Specificity (LVHA)

a:link
a:visited
a:hover
a:active

Browser issues

• IE6 doesn't support !important.