CSS Specificity

CSS Specificity of the Selectors can be determined when more than one set of CSS rules applies to the same element, the browser will have to decide which specific set will be applied to the element. This set of rules that the browser follows is collectively called Specificity.

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:

Inline style: Inline style has the highest priority, as it is directly applied with the help of style attribute.
Identifiers(ID): ID has the second highest priority, in comparison to the Class or Element Selector.
Classes, pseudo-classes, and attributes: Classes, pseudo-classes, and attributes have a medium level of specificity.
Elements and pseudo-elements: Elements and pseudo-elements have the lowest priority.

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

HTML

<!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>

Output:

Specificity Hierarchy

Article Tags :

CSS

Web Technologies