Battle of the Selectors: Specificity

tagged CSS by Jon

Sometimes selectors will stubbornly refuse to accept the properties you give them. This can lead to tedious bug hunting, hair pulling and insanity.Such issues aren’t random browser bugs, but the way selectors are designed to handle conflicts with each other. Understanding specificity will help you to avoid these annoyances and use them to your own advantage.

The Selector

In case you don’t waste your time memorizing vocabulary and terminology, here is a little refresher for you. Specificity is one of the more difficult concepts of CSS and knowing the basics will help you understand it better.

Here are the basics of CSS selector syntax. There are three parts, the selector, property and its value.

selector {property: value;}

Or, as you would normally see it…

a {color: green;}

Pseudo-elements and pseudo-classes are added like this…

selector:pseudo {property: value;}

Or…

a:hover {color: green;}

Along the same lines, there are child selectors

body > a {color: green;}

And sibling selectors

h1 + h2 {color: green;}

Selectors with common properties can be grouped

a:link, a:visited, a:hover {color: green;}

To take advantage of inheritance, a whole hierarchy of selectors can be stacked like this…

body #wrapper .sidebar a:hover {color: green;}

Ok, now that you know the basics, let’s move on.

Specificity

Specificity is the what determines what CSS property is applied in the browser when there is some kind of conflict. It’s a way to determine what has precedence. The greater the specificity a selector has, the more it’s going to pwn a selecter with less specificity.

Higher specificity = Higher priority

Ok, so at what point would a selector conflict with another? Here is a basic example:

We have two styles, body a {color: blue}, and .sidebar a {color: red}

The anchor tag in the sidebar class is also inside the body of the page. It is technically being told be blue and red at the same time. So, how does the browser determine the color to display the anchor tag? It’s very easy. There’s a few simple rules to measure a selectors specificity.

If you are a visual learner like I am, the following table will explain how specificity values are assigned better than any kind of boring definition.

Selector a b c d
a 0 0 0 1
a:hover 0 0 0 2
ul li 0 0 0 2
ul li+a 0 0 0 3
.red 0 0 1 0
.red a 0 0 1 1
#green 0 1 0 0
#green .class li 0 1 1 1
style="" 1 0 0 0

An easy way to think of this would be to give a selector a whole number based on the chart above. #red .sidebar would have 110 points. Or, .sidebar a:hover would have 12 points. Remember, the higher the specificity, the more precedence it has. Whatever has the higher specificity is what will be displayed by the browser.

More specific selectors will override more general ones. And, if two selectors have the exact same value, the one that comes last in the stylesheet will take precedence.

IMPORTANT: Remember this when determining the value of a selector. If I had 25 classes, it would not equal the same as two ID’s and five classes. The proper way to display the value is with commas. Like this: 0,3,2,0 - not 320. Each selector is confined within the rule (a, b, c or d from the table above) it is in. It’s just easier to think of it as a whole number and is fine to do so in most circumstances.

The !Important Rule

I personally haven’t found this rule to be very helpful and never use it, so I’m only going to briefly mention it.

a { color: green !important; }

Adding !important to a selector will give it precedence over everything. It has ultimate power and will obliterate any other selector, unless you use IE. Yes, Internet Explorer 6 will not always work well with this rule and older browsers will probably ignore it altogether.

Final Thoughts

I’m not going to lie, this is a pretty dry subject but a very important one to understand. Once you master the idea behind specificity, your eyes will be opened to a whole new level of what can be accomplished with CSS.

Here are a few other resources if you are interested in further reading on the subject.

Leave your mark...

If you liked this article please leave a comment and share it.

Add a comment Digg Stumble Upon Reddit

Gravatar
Juanjo Vargas
February 18th, 2008

really nice, thanks for the table, it will be so useful :)

Gravatar
chris
April 2nd, 2009

check out http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html for an interesting expansion of CSS specificity :)

Gravatar
leif
November 6th, 2009

Who is going to memorize this table? Trying to remember what has precedence after my css has ballooned to several pages and over a thousand declarations is not reasonable. I just try to have a general understanding of the powers of my classes and IDs and hope for the best. I wish there was a better solution, but !important is like a bombshell, always ready to deploy is needed.

Gravatar
Potorcal
January 28th, 2010

Ok, got it!

Gravatar
sa?l?k
February 10th, 2010

Hi very good site

hamilelik

Add a comment

This comment system uses Gravatars for customized avatars. Get your account here.

If this is your first comment, it will be held for moderation. I'll get to it as fast as I can. Thanks :p