CSS Specificity

Last Updated : 01 Jul, 2024

CSS Specificity is a fundamental concept in CSS that determines the order of style application. It is calculated based on the types of selectors used, including inline styles, IDs, classes, attributes, and element types. Understanding CSS Specificity is important for:

Avoiding styling conflicts
Ensuring consistent design application
Maintaining control over CSS code

This knowledge is essential for you to make efficient, maintainable, and scalable stylesheets that render their website or application as intended.

CSS Specificity Rules

1. Inline CSS

Inline CSS is a method of applying CSS styling directly within HTML elements using the “style” attribute. It has the highest specificity and will override all other selectors, including External stylesheets and Internal CSS.

2. Internal CSS

Internal stylesheets are a method for defining CSS styles within an HTML document’s <style> element. This styling can be used when we want to directly implement the styles within an HTML Document. The specificity of this styling depends on the CSS Selector used with the Element. For instance, if an id is used then it has the highest specificity, in comparison to the External stylesheet. For this, internal CSS will override rules defined in an external stylesheet.

3. External CSS

External CSS is used to style multiple HTML pages with a single style sheet. External CSS contains a separate CSS file with a .css extension. This style can be linked via the <link> tag in the HTML document. The specificity of this styling also depends on the CSS Selector used with the Element.

Note:

The Specificity is mainly determined by the Selectors themselves, rather than whether the styles are defined internally within a <style> tag or externally in a separate CSS file, in the case of specificity for external or internal CSS rules.
If the selectors used in External and Internal CSS contain the same components, then their specificity will be the same, and it will not be affected by the location of the CSS rule.
If any conflict exists for the styles of the same element, then the styles will be implemented based on the order of inclusion in the HTML document.
When two or more selectors have equal specificity, then the last(latest) one counts.
Universal selectors (like body and inherited selectors) have the least specificity.

Example: This example illustrates the CSS Specificity by defining the inline, internal & external styling for the elements.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
          type="text/css" 
          href="external.css">
    <style type="text/css">
        h1 {
            background-color: red;
            color: white;
        }

        h2 {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>
        Internal CSS overrides external CSS
    </h1>
    <h2 style="color: green;">
        Inline CSS overrides internal CSS
    </h2>
</body>

</html>

CSS

/* external.css */
h1 {
    background-color: lightgreen;
}

h2 {
    color: pink;
}

Output:

Specificity Hierarchy

Every Selector has a position in the Hierarchy, which is described below:

Priority	Description
Inline style	Highest priority, directly applied using the `style` attribute.
ID selectors	Second highest priority, identified by the unique `id` attribute of an element.
Classes, pseudo-classes,	Medium level of specificity, targeted using class names, pseudo-classes like `:hover`, and
attributes	attributes like `[type="text"]`.
Elements and pseudo-elements	Lowest priority, applies to HTML elements and pseudo-elements such as `::before` and `::after`.

Example: This example illustrates the level of specificity according to their hierarchy.

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        h1 {
            background-color: red;
            color: white;
        }

        #second {
            background-color: black;
            color: white;
        }

        .third {
            background-color: pink;
            color: blue;
        }

        #second1 {
            color: blue;
        }

        .third1 {
            color: red;
        }
    </style>
</head>

<body>
    <h1 id="second" class="third">
        ID has highest priority.
    </h1>
    <h1>
        Element selectors has lowest priority.
    </h1>
    <h1 class="third">
        Classes have higher priority
        than element selectors.
    </h1>

    <h2 style="color: green;" 
        id="second1"
        class="third1">
        Inline CSS has highest priority.
      </h2>
</body>

</html>