Last modified Thursday 28 December 2017 21:02:34 UTC

Q: I tried to apply CSS to my hyperlinks and the hovering didn't work. How come? Is this another case of browsers being stupid?

A: While it's always possible that you have a stupid browser-- that's not really for me to say-- it is more often the case that the styles have simply been written in the wrong order. To ensure that you see your various link styles, you're best off putting your styles in the order "link-visited-hover-active", or "LVHA" for short. If you're concerned about focus styles, they may go at the end-- but wait until you've read this explanation before you decide.

The core of the situation is this: every selector has a specificity. If two selectors apply to the same element, the one with higher specificity wins. Thus:

   P.hithere {color: green;}    /* specificity = 1,1 */
   P {color: red;}              /* specificity = 1   */

So any paragraph which has a class of hithere will be green, not red. Both selectors apply, and both try to set the color, so the more-specific selector wins out.

   P.hithere {color: green;}    /* specificity = 1,1 */
   P {font-family: Courier;}    /* specificity = 1   */

Okay, so how do pseudo-classes affect specificity? They all have equal weight, as it turns out. So the following styles all have the same specificity:

   A:link {color: blue;}        /* specificity = 1,1 */
   A:active {color: red;}       /* specificity = 1,1 */
   A:hover {color: magenta;}    /* specificity = 1,1 */
   A:visited {color: purple;}   /* specificity = 1,1 */

All of them can apply to a hyperlink, and in some cases, more than one will apply. For example, an unvisited link can be hovered and active at the same time as it's an unvisited link. Since three of the above rules apply to the hyperlink, and the selectors all have the same specificity, then the last one listed wins. Therefore, the "active" style will never appear, because it will always be overridden by the "hover" style. Now consider a hyperlink which has been visited. It will always and forever be purple, because its "visited" style beats out any other state, including "active" and "hover."

This is why the recommended order in CSS1 goes like this:

   A:link
   A:visited
   A:hover
   A:active

The first two can be in either order, actually, because a link can't be both visited and unvisited at the same time. (:link means "unvisited"; and no, I don't know why they didn't call it that.)

This is also why CSS2 now allows the chaining of pseudo-classes. For example, you could write:

   A:visited:hover {color: maroon;} /* specificity = 2,1 */
   A:link:hover {color: magenta;}   /* specificity = 2,1 */
   A:hover:active {color: cyan;}    /* specificity = 2,1 */

They have the same specificity, but they apply to fundamentally different beasts, and so don't conflict. You can get hover-active combinations, for example.

Finally, a word about how I represented specificity in this article. The specification simply concatenates numbers together, so that the first example in the post would have been written like this:

   P.hithere {color: green;}    /* specificity = 11 */
   P {color: red;}              /* specificity = 1  */

This implies a base-ten arithmetic. However, specificity calculations do NOT use base ten, a fact at which the specification hints but doesn't come right out and say in big bold letters. If you chain fifteen simple selectors together, they still have a lower specificity than a simple class selector. Here's how the specification would represent this:

   .hello {color: red;}    /* specificity = 10 */
   HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI {color: green;}
                           /* specificity = 15 */

That "10" is actually a 1 followed by a zero, not "ten." We could try representing the previous rules specificities in hexadecimal, like this:

   .hello {color: red;}    /* specificity = 10 */
   HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI {color: green;}
                           /* specificity = F */

The only problem there is that if you try to add two more selectors to the second rule, then you get a specificity of 11, and once again we get confused. In fact, the counting base for specificity is effectively infinite, and so these kinds of comparison start to break down. So I'm switching over to comma-delimited specificity calculations in the future just to avoid more confusion.