CSS Specificity

CSS specificity referes to the rank or priority of a selector.

The universal selector (*) has the lowest specificity, and id has the highest.

Also, inline styles have a higher specificity than internal or external stylesheets.

Example

#

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

The specificity of the inline style is higher
<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>

Specificity Hierarchy

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.

Calculating Specificity

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.

specificity rule

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


specificity rule

The calculated point value for this selector is 0122.


specificity rule

The calculated point value for this selector is 1000.


specificity rule

The calculated point value for this selector is 0001.

Note: The universal selector (*) has no specificity value.

Additional Specificity Rules

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.

This paragraph has an orangered text color

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

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

External vs Internal stylesheets

#

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.


The !important declaration

Above all selectors, the !important declaration overrides everything.

Regardless of the selector, the style with !important declaration will be applied.

The !important declaration should be used sparingly to avoid style confusion.

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

This paragraph has the !important text color.

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

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

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

You may also like

Guides