Articles :: CSS :: Specificity
written by Toby Miller on October 4, 2005 October 4, 2005
Have you ever wondered "Why does this rule work and that one doesn't? I listed it afterwards so it should overwrite the previous one, right? Grrrr!". We've all been there. CSS Specificity is how a browser knows which of two styles it should render. Once you learn how this works you'll stop saying things like "Why do you hate me CSS? What have I done to you?!!!" and start saying things like "Hahaha! Render this Bitch!".
All modern browsers, from what I've seen, respect the same specificity rules. Those rules are basically based on two topics; specificity and line order.
CSS Specificity is determined by applying a point system to all of the elements of a CSS Rule. The points are counted as:
- HTML Tag = 1 point
- Class Name = 10 points
- Unique Id Name = 100 points
A dissected example would look like this:
css code:
1:TABLE.history TR.footer TD.legend SPAN#mykey { font-weight:bold; }
2:/* 1 + 10 + 1 + 10 + 1 + 10 + 1 + 100 = 134 points */
So the basic description of how to determine which style is more important than another style is simple:
- If the specificities are different, choose the higher one
- If the specificities are the same, choose the one with the higher line number
If you were to put this logic into code it would look like this:
pseudo-code:
1:if (rule1:specificity > rule2:specificity)
2:{
3: respect rule1;
4:}
5:else
6:{
7: if (rule1:specificity == rule2:specificity)
8: {
9: // specificities match, higher line number wins
10: if (rule1:line > rule2:line)
11: {
12: respect rule1;
13: }
14: else
15: {
16: respect rule2;
17: }
18: }
19: else
20: {
21: respect rule2;
22: }
23:}
So are you ready to play now? If so then copy and paste this html code into a local file on your machine and start experimenting. Add and remove html tags, insert and delete tag rules, class names and unique ids. Pay attention to how the different specificity scores and line orders impact the importance of one rule over another. Keep doing this until you're able to see the outcome before you make the change. Once you've got this you'll very rarely find yourself scratching your head over CSS again (well, at least in regards to specificity). =)
html code:
1:<html>
2:<head>
3:<title>CSS Scoring</title>
4:<style type="text/css">
5:
6:/* 2 points */
7:TABLE TD {
8: background-color:orange;
9:}
10:
11:/* 2 points */
12:TR TD {
13: background-color:pink;
14:}
15:
16:
17:/* 1 point */
18:TD {
19: background-color:red;
20:}
21:
22:/* 12 points */
23:TR TD.classname {
24: background-color:yellow;
25:}
26:
27:/* 11 points */
28:TD.classname {
29: background-color:green;
30:}
31:
32:/* 10 points */
33:.classname {
34: background-color:lime;
35:}
36:
37:/* 102 points */
38:TR TD#idname {
39: background-color:cyan;
40:}
41:
42:/* 101 points */
43:TD#idname {
44: background-color:blue;
45:}
46:
47:</style>
48:</head>
49:<body>
50:
51:<table>
52: <tr>
53: <td>plain cell</td>
54: <td class="classname">classname cell</td>
55: <td id="idname">idname cell</td>
56: </tr>
57:</table>
58:
59:</body>
60:</html>
The next lesson to take away from this newfound understanding is that you can now look at a rule written by someone else that, for one reason or another, you can't modify. You can now add up the score to their rule and use that knowledge to construct a new rule that overwrites it. Pretty cool huh?
permalink
|
Natural Living (5)
Heating & Cooling (1)
Herbal Remedies (1)
Personal (0)
Family (1)
Humor (11)
Miscellaneous (1)
Politics (5)
Technology (2)
System Administration (4)
Linux (1)
Solaris (0)
Web Development (2)
CSS (3)
Design (1)
Flash (1)
JavaScript (11)
PHP (1)
CakePHP (1)
Web Browsers (2)
Firefox (1)
Internet Exploder (0)
Netscape (1)
|
