Prioritization in CSS: id, class, tag – which has the most weight?

At times, working with CSS – especially when you’re working in someone else’s work – it can be a real treasure hunt. The title of the sidebar is appearing in the wrong color, but no matter what you try, nothing seems to be having any effect on it.

But there will always be a good explanation for why the elements are appearing the way they do. What simplifies your treasure hunt with a factor of about … a lot, is knowing what gets prioritization in CSS and on what scale. So sure an ID (#title) has more weight or importance in CSS than a class (.title), but it is good to know just how much weight CSS is assigning to them. In CSS importance or prioritization is called specificity. So the styling with the highest specificity wins. So how are these specificities being calculated you’re asking? Here I present to you the values.

The true weight of tags, classes, ids and in-line styles

  1. The inline styling: 1000 pts
  2. The ID selector: 100 pts
  3. The Class selector: 10 pts
  4. The tag selector: 1pt

With these numbers you can now calculate the weight or specificity of each selector, each line on your CSS. To give you a bit of an idea how this works out in real life, have a look at the following table:

Selector ID Class Tag Total
p 0 0 1 1
.class 0 1 0 10
p.class 1 1 0 11
#id 1 0 0 100
#id p 1 0 1 101
#id .class 1 1 0 110
a:link 0 1 1 11
a:first-line 0 0 2 2
h2 strong 0 0 2 2
#wrapper #contant .class a:hover 2 2 1 221

One thing you probably noticed in the table above is that pseudo-elements (such as :before, :after, :first-line) are treated like tags while pseudo classes (such as :hover, :focus, :link) are considered equal to classes.

Overriding the specificity

If you’re really stuck and you really have to override some styling you could of course resort to the most horrific property in CSS: !important. I consider !important the source of all evil in CSS and hate it with as much passion as I hate the bad practice of inline styling (more about that in a second). Why? Because it’s like a bulldozer. Which is fine by itself, but if, at a later stage, you wish to make a quick change to the stylesheet, you can’t. Well, you could of course override an !important (.class {color:#000 !important;}) with another !important plus a class or id (#wrapper .class {color:#000 !important;}) for example, but where will that end? In my opinion, if you need to resort to the use of !important in your css, there’s something seriously wrong with your styling and I’d suggest you take a few days out to rewrite your CSS from scratch in such a way that hacks such as the one described here are not and never necessary.

Another bad practice is the use of inline styling. The <p style=”color:#000″> rubbish you see far too often. If you look at the overview above you can see just how difficult it is to override inline styling. It’s actually impossible without the use of !important which makes it double evil. Both methods described here are extremely ugly and bad ways to style your markup and you will hate yourself at some point if you were to use them. Especially with the current responsive (RWD) revolution in web design, these can become quite a pain when you apply different styling at various breakpoints.

So…

Cascading stylesheets assign weight to the various elements of your markup. This so called specificity also adds logic to the hierarchy now that you are aware of the exact weight that given to it. With this knowledge you should be able to eliminate the practice of treasure hunting from your web projects and above all, avoid the use of !important and inline styling!

1 Comment