CSS Specificity

This element is lightblue because the inline style has the highest specificity.

<style>
  .my-style {
    background-color: red;
    padding: 20px;
  }
</style>

<div class="my-style"
     style="background-color:aliceblue;">
  The specificity of the inline style is higher
</div>

Four categories define the specificity level of selectors.
They are listed below, sorted from most specific to least specific.

1. Inline style
   • A style that is directly applied to an element using a style attribute.
   • e.g. <p style="color:red;">...</p>.
2. ID
   • A style that is applied to an element with a given id.
   • e.g. #header, #customer-65225.
   • Recall that id's are unique across a page.
3. Class, pseudo-class, attribute
   • A style that applies to all elements with a given class value.
   • e.g. .bg-green, .bordered.
   • Includes pseudo-classes, e.g. :hover, :active, :focus.
   • Also includes additional element attributes, e.g. [type="text"].
4. Element and pseudo-element
   • A style that applies to all elements with a given tag name (i.e. type).
   • e.g. ul, div, and input.
   • Includes pseudo-elements, e.g. :before, :after.

CSS styling with multiple selectors can be confusing if you don't know the specificity rules. The image below depicts how each selector is calculated.

Explanation

• Each selector gets points, and the highest wins.
• The inline style receives the highest priority while the element selector has the lowest.
• For instance, inline styling is equivalent to 1000, which automatically wins.
• For an ID selector, add 0100 points.
• For each class, attribute, or pseudo-class selector instance, add 0010 points.
• For each element selector instance, add 0001 points.
• The selector with the hightest points will be used as the element's style.

Examples

The calculated point value for this selector is 0122.

The calculated point value for this selector is 1000.

The calculated point value for this selector is 0001.

For elements that use the same CSS rule or have equal specificity, the one that appears last in the stylesheet will be applied.

Two equivalent CSS rules are applied to a <p> element. The style that appears last is used.

<style>
  .mycolor { color: teal; }
  .mycolor { color: orangered; }
</style>

<p class="mycolor">
  This paragraph has an 
  orangered text color
</p>

For embedded (external) and internal stylesheets, the style sheet which is closest to the element will be applied.

The example below uses an external CSS stylesheet before the internal CSS. The style inside the <style> will be used.

/* External CSS file */
#content > div { background-color: lavender; }

/* Internal CSS style */
<style>
  #content > div { background-color: steelblue; }
</style>

Finally, the universal selector (*) and inherited values have the lowest specifity.

In this example, the inline and class selectors are overriden by the element selector with the !important declaration.

<style>
  p {
    color: orangered !important;
  }

  .teal {
    color: teal;
  }
</style>

<p class="teal"
   style="color: steelblue">
  This paragraph has the
  !important text color.
</p>

• Our CSS Selectors Tutorial
• Our CSS Pseudo-class Tutorial
• Our CSS Pseudo-element Tutorial
• Our HTML Tag List