Crescent order of specificity

The following list of selectors is by increasing specificity:

• Universal selectors
• Type selectors
• Class selectors
• Attributes selectors
• Pseudo-classes
• ID selectors
• Inline style

The !important exception

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity.

The :not exception

The negation pseudo-class :not is not considered as a pseudo-class in the specificity calculation. Although, selectors placed into the negation pseudo-class count as normal selectors.

Here is a CSS chunk:

div.outer p {
  color:orange;
}
div:not(.outer) p {
  color: lime;
}

Used with the following HTML:

<div class="outer">
  <p>This is in the outer div.</p>
  <div class="inner">
    <p>This text is in the inner div.</p>
  </div>
</div>

Will appear on the screen as:

This is in the outer div.

This text is in the inner div.

Form-based specificity

Specificity is based on the form of a selector. In the following case, the selector counts as an attribute in the specificity determination algorithm although it selects an ID.

The following style declarations:

* #foo {
  color: green;
}
*[id="foo"] {
  background: purple;
}

Used with this markup:

<p id="foo">I am a sample text.</p>

Will end up looking like:

I am a sample text.

Because it matches the same element but the ID selector has a superior specificity.

Tree proximity ignorance

The following style declaration:

body h1 {
  color: green;
}
html h1 {
  color: purple;
}

With the following HTML:

<html>
<body>
  <h1>Here is a title!</h1>
</body>
</html>

Will render as:

Here is a title!