CSS Order Priority Tips and Tricks

In CSS, we often declare more than what we required, overwriting other styles definition. However, in CSS there are certain rules that we must obey for us to properly overwrite the rule that we want as well. In this article, you will find all the CSS order priority tips that can benefit you in writing effective and efficient CSS definition.

Sequence Of Anchor Pseudo-classes

The correct way of declaring a sequence anchor pseudo-classes is shown below,

a:link {color:#FF0000}      /* unvisited link */<br />
a:visited {color:#00FF00}  /* visited link */<br />
a:hover {color:#FF00FF}  /* mouse over link */<br />
a:active {color:#0000FF}  /* selected link */<br />

If you tried to mess the sequence up, you will find that the above 'action' will be overlapped. Here are some important things to take note of when using anchor pseudo-classes.

a:hover MUST come after a:link and a:visited in the CSS definition
a:active MUST come after a:hover in the CSS definition
Pseudo-class names are not case-sensitive

anchor pseudo-classes will be easily achieved with the above rule in mind.

Order of Specification

Ever wonder what will happen if you have two rule that contains the same weight? Something like the one shown below?

#wearethesame{
color:#FFF;
}
#wearethesame{
color:#000;
}

Just remember this, when two rules have the same weight, the last rule specified wins! Black color will display in this case.

!important

!important is a powerful tool to specific a CSS definition as important. Hence, if the previous example were being declared and one of it is being set to !important, the one with the !important will have the highest priority!

#wearethesame{
color:#FFF !important;
}
#wearethesame{
color:#000;
}

In this case, the first one will display instead. Here are some points you should take note of when using !important.

since both author and reader may specify important rules, the author's rule will override the reader's in cases of importance.
A style that is designated as important will win out over contradictory styles of otherwise equal weight.

It is as important as !important that you take note of the above point! This means that if you as an author declare !important over a style that contains color or font size such as the one above, whenever user tried to overwrite your colors or font size will deem invalid. Especially for older users who will really need such capability to overwrite your default font-size and colors! This might result in poor usability due !important.

Selector Order Priority

Another interesting thing you might want to know. If you have 4 specification on a single element such as the one below,

#thislist{color: black;}
ul li ul li.thislist{color: green;}
li.thislist{color: red;}
li{color: blue;}

Assuming the HTML element is

<ul>
	<li>
		<ul>
			<li class='thislist' id='thislist'>hello!</li>
			<li></li>
		</ul>
	</li>
	<li></li>
</ul>

which color will appeared? The answer is black! How do i know? Because i tested it! Just Kidding. The answer is pretty simple. In CSS, the more specific the style is define, the more likely it will be used over the less specific ones. So how do we know how specific it is being define? Lucky, there is a way to calculate such specificity in CSS and here's how:

Calculate the number of times the ID attributes in the selector.
Calculate the number of times the CLASS attributes in the selector.
Calculate the number of times the HTML tag names in the selector.

Once you done that you will have 3 digit. Each digit is meant for each description above. Next, arrange them from left to right starting from the first description to the third one. And you will have something like this.

#thislist{color: black;} /*a: 1 b: 0 c: 0 = 100*/
ul li ul li.thislist{color: green;} /*a: 0 b: 1 c: 4 = 014*/
li.thislist{color: red;} /*a: 0 b: 1 c: 1 = 011*/
li{color: blue;} /*a: 0 b: 0 c: 1 = 001*/

Where a, b and c is equivalence to 1., 2. and 3. on the description. Hence we get our specificity as follows

#thislist = 100
ul li ul li.thislist = 014
li.thislist = 011
li = 001

In numeric number, 100 is bigger than 14, 11 and 1. Therefore, black will appeared instead of the others. I think the explanation is pretty clear now. But how do we calculate this when there is a specificity of a id/class/html that have more than a digit? In this case, you may need to convert the numbers to a larger base to end up with three digits.

Summary

The above mention CSS order priority tips and tricks will be pretty useful for people who are not aware of such things in CSS. Furthermore, this can greatly help out people to avoid using too much !important and reduce the overall design usability. Nonetheless, if you guys have any other CSS order priority tips and tricks to share. feel free to spam the comments below!