Skip to content

Instantly share code, notes, and snippets.

@jerone
Last active Jan 17, 2016
Embed
What would you like to do?
CSS Priority

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment