CSS Specificity explained

What is specificity?

In case there are two or more conflicting CSS rules that points to same element, specificity determines wich CSS rules will be applied.

Specificity hierarchy

Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:

1. Inline styles
2. ID
3. Classes, attributes and pseudo-classes
4. Elements and pseudo-elements

So, inline styles will always have the highest specificity and will be used above id, classes, elements etc.

Inline styles

<h1 style="color:red;">Inline styles have the highest specificity!</h1>

Inline styles have the highest specificity and in case of conflicting CSS rules, inline styles will be applied above all other rules.

id

html

<h1 id="blog-header">Id has the second highest specificity</h1>

css

#blog-header {
  color: blue;
}

Id's have the second highest specificity. That means id's will be used over classes and elements in conflicting situations.

Classes, attributes and pseudo-classes

html

<h1 class="main-header">Class example!</h1>

<a href="http://www.webdevolution.com">Webdevolution (attribute exapmle)</a>

<button>Pseudo-class example!</button>

css

/* Class example */

.main-header {
  color: green;
}

/* Attribute exapmle */

a[href="http://www.webdevolution.com"]
{
  color: red;
}

/* Pseudo-class example */

button:hover {
  background: blue;
}

Classes, attributes and pseudo-classes comes third in specificity. They will be used over elements and pseudo-elements in conflicting situations.

Elements and pseudo-elements

Last but not least in specificity comes elements and pseudo-elements.

html

// Element example

<p>Element</p>

// Pseudo-element example

<p>Pseudo-element</p>

css

/* Element example */

p {
  color: purple;
}

/* Pseudo-element example */

p::first-letter {
  color: blue;
}

Some other rules of thumb

• Incase there is two or more CSS attributes with same specificity, the rule wich was declared last will be used. This is called CSS cascade.
• Directly targeted element will take precedence over rules which an element inherits from its parent.

The !important exception

It's !important to know that there is also a way to go around the standard specificity rules.

You can use !important rule to overwrite any other CSS declarations.

html

<h1 id="high">Header</h1>

css

#high {
  color: green;
}

h1 {
  color: purple !important;
}

In the case above - purple will be used as a color for the h1 even though id has higher specificity than elements.

Using !important is generally considered a bad practice since it makes debugging the code harder. You should always avoid using !important if you can.

!important is mostly used to override stylings of external libraries such as Bootstrap or Materialize CSS.

Conclusion

So, in conclusion CSS specificity is a weight that is set for all selectors. This weight determines which CSS rules will be applied to the element.