Specificity in CSS explained
In CSS, specificity is a mechanism that determines which styles are applied to an element when there are conflicting rules. It is calculated based on the types of selectors used in the CSS rules.
The more specific a selector is, the higher its weight, and the more likely it is to be applied over less specific selectors. Let me show you how to calculate the specificity of CSS selectors and how it works when there are multiple rules targeting the same element.
Weight of a CSS selector
The weights are defined by three categories. Adding the weight of each category will result in a three-part numberic value, for example: 1-0-0, 1-0-1 or 0-2-1. These are the categories:
1st number: ID category. The ID selector starts with a '#'. 1-0-0
#my-page {} /* ID */
2nd number: class category. Including class, attribute and pseudo-class. 0-1-0
.my-page {} /* Class */
[type="search"] {} /* Attribute */
:focus {} /* Pseudo-class */
3rd number: type category. Including element type and pseudo-elements. 0-0-1
a {} /* Element type */
::before {} /* Pseudo-element */
Specificity examples
#my-id {} /* 1-0-0 (category: ID) */
.my-class {} /* 0-1-0 (category: class) */
[input="text"] {} /* 0-1-0 (category: class) */
:focus {} /* 0-1-0 (category: class) */
:nth-child(1) {} /* 0-1-0 (category: class) */
h1 {} /* 0-0-1 (category: type) */
::after {} /* 0-0-1 (category: type) */
#header.page-top {} /* 1-1-0 (categories: ID, class) */
div#header.page-top {} /* 1-1-1 (categories: type, ID, class) */
input[type="text"]:focus {} /* 0-2-1 (categories: type, class, class) */
div#page form input:required:focus {} /* 1-2-3 (categories: type, ID, type, type, class, class) */
Comparing CSS selectors
When a CSS property is defined in multiple rules and target the same element, the browser compares the selectors' specificity numbers. These numbers are evaluated from left to right, and the selector with the higher value takes precedence.
If the values are equal, the comparison moves to the next category until a difference is found. If there are no difference found between selectors' specificity, the last CSS declaration wins.
The !important flag
The !important declaration can be added to a CSS property to give it the highest priority. When a property is marked with this flag, it will override any other declarations, regardless of their specificity.
.my-class { color: blue !important; } /* This will override any other color declarations */
Applying styling to HTML example
HTML:
<div id="content">
<article>
<h1 class="title">Important title</h1>
<p>This is some text containing a <a href="#">link</a>.</p>
</article>
</div>
CSS:
/* Set color of text.
---------------------------- */
#content { color: blue; } /* 1-0-0. Wins! ID number is higher */
div { color: red; } /* 0-0-1 */
/* Set font size of heading.
---------------------------- */
div#content h1 { font-size: 22px; } /* 1-0-2. Wins! ID number is higher. */
div article h1.title { font-size: 18px; } /* 0-1-3 */
/* Set font weight of heading.
---------------------------- */
div h1 { font-weight: normal; } /* 0-0-2 */
h1.title { font-weight: bold; } /* 0-1-1. Wins! Class number is higher */
/* Set font style of heading.
---------------------------- */
article h1 { font-style: normal; } /* 0-0-2 */
article .title { font-style: italic; } /* 0-1-1. Wins! Class number is higher */
/* Set color of link.
---------------------------- */
a { color: green !important; } /* 0-0-1. Wins! The !important declaration overrides other styles. */
article p a { color: purple; } /* 0-0-3. */
/* Set background color of div.
---------------------------- */
div#content { background-color: yellow; } /* 1-0-1 */
div#content { background-color: lightblue; }/* 1-0-1. Wins! Same specificity, so last declaration wins. */
When you open the page in the browser, you can see the styles applied in DevTools.
See specificity in Visual Studio Code
When working in Visual Studio Code, you can see the specificity of CSS selectors by hovering over a selector in the CSS file.
