Search code examples
csscss-selectorscss-specificity

Order of precedence of CSS rules

If more than one CSS rule applies to an element and specifies the same property, then CSS gives priority to the rule that has the more specific selector.

That means, An ID selector is more specific than a class selector, which in turn is more specific than a tag selector, as shown below,

#id1 {
  color: blue;
}
.class1 {
  color: red;
}
p {
  color: green;
}
<p class="class1" id="id1">Sham</p>

the output is a paragraph text in blue color.

For the below code,

p[data-colour] {
  color: yellow;
}
#id1 {
  color: blue;
}
.class1 {
  color: red;
}
p {
  color: green;
}
<p class="class1" id="id1" data-colour>Sham</p>

With respect to attribute selectors, What does CSS rule specificity say?

Solution

  • It is still blue. Attribute selectors are on the same level as classes. For more information see: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity