You are here: Home / Dog Blog / Archives

CSS Specificity

Monday 16 May, 2005 (10:14AM GMT)

I have added a short article about specificity to the HTML Dog guides.

Back in the days when I was first getting to grips with CSS, now and then I would come across the strange situation of a browser ignoring my explicit rules. "I want that text to be yellow, so why are you insisting on making it white? Look! I've told you I want it in yellow! Damn you! I hate technology!"

What was happening was that my selectors weren't specific enough � there was a conflicting, more specific rule in the stylesheet that was taking precedence.

It's not an obvious system, and often doesn't come in to play, but understanding specificity can prevent a lot of head scratching and give you a bit more control over what you want to do.

Comments

Comment 1

I struggle with this sometimes, certainly when I was just starting out with CSS. I've found that Mozilla Firefox's DOM inspector is a great help, as it will show you how each CSS rule is being evaluated and which rules are overwriting others.

So said Edward on Monday 16 May, 2005 at 2:22PM GMT.

Comment 2

""I want that text to be yellow, so why are you insisting on making it white? Look! I've told you I want it in yellow! Damn you! I hate technology!""

Man, have I found myself saying that so many times! Its like you're reading my mind.

Thanks for the useful information on the 'selector' math. Never knew that. Its already helped me out some...

So said Kick The Donkey on Monday 16 May, 2005 at 2:27PM GMT.

Comment 3

Thanks goodness there's a "Computed Style" pane in the DOM Inspector. Saved me a number of times.

So said Milan Negovan on Monday 16 May, 2005 at 3:16PM GMT.

Comment 4

My next question is: "Do the browsers all consistently follow the prescribed math?"

So said RobotHero on Monday 16 May, 2005 at 11:32PM GMT.

Comment 5

That is a great overview there which I'm sure will help me with future CSS coding. Thanks

So said Darren B on Friday 20 May, 2005 at 9:05AM GMT.

Comment 6

I'd like to point out something the article doesn't make quite clear: the values are in an infinite-base counting system. Thus a single class selector has more specificity than a selector containing 25 element selectors. This is why I started comma-separating the specificity values back in 2001, and the CSS2.1 specification uses a similar approach. It makes it a lot more clear that specificity is not base-ten additive.

So I'd write your examples like this:

p has a specificity of 1 (1 HTML selector)
div p has a specificity of 2 (2 HTML selectors; 1+1)
.tree has a specificity of 1,0 (1 class selector)
div p.tree has a specificity of 1,2 (2 HTML selectors and a class selector)
#baobab has a specificity of 1,0,0 (1 id selector)
body #content .alternative p has a specificity of 1,1,2 (HTML selector, id selector, class selector, HTML selector)

As for the question about browsers being consistent, the answer is "yes, with incredibly rare edge-case exceptions". These tend to center on interactions between inline styles (which are represented as 1,0,0,0) and !important declarations, and are an article in themselves just because they're so obscure there's a lot of setup needed just to be able to explain the inconsistencies.

So said Eric Meyer on Monday 30 May, 2005 at 4:24PM GMT.

Comment 7

Thanks Eric. Good point, and an oversight on my part. There I was trying to simplify things when there was a glaring mistake in my logic :)

So said Patrick on Monday 30 May, 2005 at 4:42PM GMT.

Comment 8

May be worth mentioning the Web Developer Toolbar for Firefox - amongst its many useful functions is one where you can click on an element on the screen and it shows you which CSS rules are being applied to it. Very useful for solving those "why's it doing that?" mysteries.

So said Chris Hunt on Wednesday 1 June, 2005 at 2:07PM GMT.

Comment 9

How important is !important?

Say, if I write something like this:
p {
color: blue !important;
}

div p {
color: red;
}

... how would that be interpreted?

So said Martin Strand on Monday 6 June, 2005 at 12:35PM GMT.

Comment 10

2Martin:

I doubt that, really... what's the difference?!

So said Paul on Saturday 17 December, 2005 at 2:56AM GMT.

Comment 11

I've never used CSS until a friend of mine has shown me all the peculiarities. Though I'm sure there are even more comfortable style-managing stuff coming soon...

Thanks for attention.

So said Murdoc on Wednesday 21 December, 2005 at 7:47PM GMT.

Comment 12

I think CSS gives you the utmost control.. vene when those naughty banner cut programs are used, the outline doesn't breaks thanks to CSS...

So said Kingsten on Thursday 22 December, 2005 at 7:47PM GMT.

Comment 13

May be worth mentioning the Web Developer Toolbar for Firefox - amongst its many useful functions is one where you can click on an element on the screen and it shows you which CSS rules are being applied to it. Very useful for solving those "why's it doing that?" mysteries.

So said Kate on Friday 20 January, 2006 at 7:01AM GMT.

See Also

^ Top

SiteGround: Fast, reliable, recommended hosting.