Use the "LoVe HAte" Rule

Contact Us or call 1-877-932-8228
Use the "LoVe HAte" Rule

Use the "LoVe HAte" Rule

The "LoVe HAte" rule specifies the order you should use for rules affecting link pseudo-classes:

  1. :link - unvisited links
  2. :visited - visited links
  3. :hover - links over which the cursor hovers
  4. :active - links on which the user has clicked

This has to do with the specificity of the selectors and the fact that a link can be in multiple states simultaneously. Because all of these pseudo-classes have the same specificity, the rule that is defined last will take precedence. So, for example, if you define the :visited rule after the :active rule, then a link that is visited will never appear active.

Open CssBestPractices/Demos/LoVeHAte.html in your browser to see this in action. The code is shown below:

Code Sample:

CssBestPractices/Demos/LoVeHAte.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#working a:visited {
	text-decoration:underline;
	color:#f0f;
}
#working a:active {
	text-decoration:none;
	color:#f00;
}

#broken a:active {
	text-decoration:none;
	color:#f00;
}
#broken a:visited {
	text-decoration:underline;
	color:#f0f;
}
</style>
<title>The LoVe HAte Rule</title>
</head>
<body>
<p>After visiting the linked site, return to this page and click and hold each link. The first link will change color and style.  The second will not.</p>
<p>This is because, after the linked page has been visited, when the use clicks down, the link is both active and visited. Which ever rule is defined second will take precedence.</p>
<ol>
	<li id="working"><a href="http://www.cnn.com">CNN</a></li>
	<li id="broken"><a href="http://www.cnn.com">CNN</a></li>
</ol>
</body>
</html>
Next