CSS Specificity | Definition, Syntax, Examples | Specificity Rules and Hierarchy of CSS Specificity

by

In this tutorial, beginners and experienced CSS learners can find the complete guide on Specificity in CSS. Just take a look at the below available direct links and have a quick reference on CSS Specificity.

What is Specificity in CSS?

CSS Specificity is the set of rules applied to CSS selectors in order to determine which style is applied to an element. The more specific a CSS style is, the higher the point value it accrues, and the likelier it is to be present on the element’s style.

Example:

<p class="container">Roger</p>

In CSS, we can specify like:

.container {
  color: yellow;
}

also, we can target the paragraph tags like:

p {
  color: red;
}

By understanding how styles are applied, we can ensure the styles we want to display are being rendered.

CSS can quickly become unruly when we don’t stop to think about architecture for our style sheets, and instead throw a ton of CSS selectors around without thinking about specificity.

By making the most of CSS Specificity, we ensure that our code is organized, and our selectors won’t conflict with one another.

Also Read:

Specificity Rules

Inline CSS>Internal CSS>External CSS

  • CSS style implemented by referencing outside stylesheet that has the lowest precedence and is overridden by Internal and inline CSS.
  • Internal CSS is overridden by inline CSS.
  • Inline CSS has the highest priority and overrides all other selectors.

Example:

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

Output:

css specificity rules example

Hierarchy of CSS Specificity

Every element selector has a position in the Hierarchy of specificity in CSS. The following four categories determine the specificity level of a selector:

  • An inline style is connected directly to the element to be styled. Example: <h1 style=”color: #ffffff;”>.
  • IDs – An ID is a unique identifier for the page elements, like #navbar.
  • Classes, attributes and pseudo-classes – This category contains .classes, [attributes] and pseudo-classes like :hover, :focus etc.
  • Elements and pseudo-elements – This category consists of element names and pseudo-elements, for instance: h1, div, :before and :after.

How to Calculate Specificity?

Remember the process of calculating specificity by having a glance at the below point.

Begin at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class, or pseudo-class, add 1 for each element name or pseudo-element.

Examine these three code fragments:

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

Then, the result will produce like this:

The specificity of A is 1 (one element)
The specificity of B is 101 (one ID reference and one element)
The specificity of C is 1000 (inline styling)

As 1 < 101 < 1000, the third rule (C) has a greater level of specificity, and hence it will be implemented.

How Does it Work?

By following the three buckets of CSS specificity, you can learn at a high level of knowledge on how it falls under:

1. Type Selectors & Pseudo-Element

type pseudo

For Example:

p {
} /* 0 0 0 1 */
span {
} /* 0 0 0 1 */
p span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
div p > span {
} /* 0 0 0 3 */

2. Class Selectors, attribute selectors, and pseudo-class selectors

class pseudo class attribute

Example:

.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */

3. ID selectors

id selector

Example:

#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */

Also, there is in-line styling which doesn’t use any CSS rather specify the style in-line with the HTML.

Example:

<p style="color: red">Test</p> /* 1 0 0 0 */

!important Rule

There is another property !important that doesn’t follow any specificity rather it is applied overriding all the CSS properties and specificities.

p {
  font-size: 20px !important;
}

Tips on CSS Specificity

  • The universal selector (*) has no specificity value (0,0,0,0)
  • Pseudo-elements (e.g. :first-line) get 0,0,0,1 unlike their psuedo-class brethren which get 0,0,1,0
  • There’s a highly debatable topic related to using !importantas it overrides all the CSS values. It is also a good practice not to use any id selectors but class selectors.
  • The pseudo-class : not() adds no specificity by itself, only what’s inside its parentheses.