CSS precedence link

Question

I'm trying to get CSS precedence right but for some reason this code won't use the a:hover style defined in #hs properly. #hs li.druid a:link seems to overwrite the background-color defined in #hs li a:hover even though I'm just specifying a:link and not a:hover. It does inherit the other stuff like the color though. It doesn't matter where I place the code, I've tried switching it around but with the same result.

HTML:

<div id="nav">
  <ul id="hs">
    <li class="druid">
      <a href="druid">Druid</a>
    </li>
  </ul>
<div>

CSS:

#hs {  
  list-style-type: none;
  padding: 0;
  overflow: hidden;
}
#hs li a:link, #hs li a:visited {
  display: block;
  width: 150px;
  font-weight: bold;
  color: #FFFFFF;  
  padding: 10px 0px;
  margin: 25px auto;
  border-radius: 4px 4px 4px 4px;
  text-transform: uppercase;
}
#hs li a:hover, #hs li a:active {
  color: #00AA00;
  background-color: orange;
  text-decoration: none;
}
#hs li.druid a:link {
  background-color: #855C33;
}

Answer 1

It's due to CSS specificity.

The specifity of each selector:

• #hs li.druid a:link - 122
• #hs li a:hover - 112

You could decrease the specificity of the selector #hs li.druid a:link. Without the id, the specificity is lowered from 122 to 22.

li.druid a:link {
  background-color: #855C33;
}

---

A safer approach would be to increase the specificity of the selector #hs li a:hover by adding the id selector #nav. In doing so, you add 100 points to each selector, thereby allowing it to overwrite the other selectors.

#nav #hs li a:hover,
#nav #hs li a:active {
  color: #00AA00;
  background-color: orange;
  text-decoration: none;
}

Here is a relatively helpful link for calculating specificity given a selector.