CSS Specificity - Which CSS Rule to apply?

What is Specificity?

Each CSS selector has a specificity value, and more specific selector has the higher precedence it has. If multiple selectors apply to a single element, the highest specificity CSS rule apply to the element. Have you had an experience where you define a CSS rule for an element, and it doesn't work? You probably have a CSS rule that has a higher specificity value which causes your newly created CSS rule to not apply.

Which CSS rule applies to an element?

  1. There are 4 categories of specificity level of a selector in the order of their precedence: (1) inline styles, (2) ID (#), (3) Class (.) and (4) elements.
  2. More specific selector has a higher specificty value, and the higher specificity selector wins the conflict if there are multiple selectors apply to the same element.
  3. If selectors have an equal specificity value, the latest rule ("sort order") found on the page wins the race.
  4. The "! important" wins every selector, including inline style.

Specificity is an algorithm used to create specific rules based on selector types and stylesheet type (inline, embedded or external). If a rule is found to be more specific than one that comes later in the sort order, the more specific rule is applied no matter where the rule resides. Consider the example below:

#header div ul li { text-decoration: none; }

<div id="header">
            <li><a href="#">Menu 1</li>
            <li><a href="#">Menu 2</li>
            <li><a href="#">Menu 3</li>
Selector Presence of Inline Style No. of ID selectors No. of class selectors No. of element selectors
#header div ul li 0 1 0 3
.wrapper div ul li 0 0 1 3
ul li 0 0 0 2

As seen in the table above, if there is an inline style within the element, a count of 1 goes into the first column which will bring the specificity of the selector higher than all of the above.

*Editor's Note: The reason for using CSS is to separate the HTML markup and STYLE. (1) Use of the inline style defeats this purpose, so inline style should be avoided at all cost. The only exception would be when you are making a blog post where you want the style to be permanent to the particular post. (2) Similarly, embedded style makes it difficult to unify style of entire website so embedded style should also be avoided except for when you're creating a standalone webpage such as a squeeze or landing page of marketing campaign. (3) Do not use !important specificity rule in the production environment as it will override all styles including inline, and trying to resolve a conflict having the !important rule will be tedious.



Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.