CSS: Specificity

When styling a page you might wonder how the browser picks which rule to apply. Specificity plays a core role in rule selection. There are other considerations that a browser makes based on origin and importance but I’ll leave that for another post.

Specificity is calculated into a concatenated value created from the selector of a Rule. The concatenated value looks like this.
A,B,C,D

A Inline Style
B Element ID
C Class
D Element (Type)

Example:

As you can see from the example inline styles are given the highest specificity and are very hard to override. That is why it is generally a bad idea to use inline styles in your markup.

Leave a Reply

Your email address will not be published. Required fields are marked *