Problems overwriting link styles Options

[CodeKing]

Here's a few links:

CODE

<div id="leftNav">


  <a href="/article/1" class="">
    Home
  </a>
  

  <a href="/article/2" class="special_link_1">
    Support
  </a>
  

  <a href="/article/5" class="special_link_2">
    A Long Page
  </a>
  

  <a href="/article/7" class="special_link_3">
    Editing Test
  </a>
  


</div>

Now here's the CSS for it

CODE

#leftNav {
    position:absolute;
    left:0px;
    top:70px;
    width:150px;
}

#leftNav a:link,
#leftNav a:visited,
#leftNav a:active {
    display:block;
    color:#FFF;
    background:#FF0000;
    width:150px;
    height:50px;
    text-decoration:none;
    text-align:center;
    vertical-align:middle;
    padding-top:10px;
}

#leftNav a:hover {
    background:#C00;
}


.special_link_1 a:link,
.special_link_1 a:visited,
.special_link_1 a:active {
  background:#1A1;
}

.special_link_1 a:hover {
  background:#080;
}

When a link has a class of special_link_1, it keeps the background color of left_nav, even though it shouldn't. Why is it doing this. (And I know that special_link_2 and 3 don't exist, i haven't created them)

[Darin McGrew]

Check the rules for calculating a selector's specificity. The #leftNav selectors are more specific than the .special_link_1 selectors, so they take priority.

[CodeKing]

I changed up my code. Now here's the links:

CODE

<div id="leftNav">


  <a href="/article/1" class="special_link_default">
    Home
  </a>
  

  <a href="/article/2" class="special_link_1">
    Support
  </a>
  

  <a href="/article/5" class="special_link_2">
    A Long Page
  </a>
  

  <a href="/article/7" class="special_link_3">
    Editing Test
  </a>
  


</div>

And here's the CSS

CODE

#leftNav {
    position:absolute;
    left:0px;
    top:70px;
    width:150px;
}

#leftNav a:link,
#leftNav a:visited,
#leftNav a:active {
    display:block;
    color:#FFF;
    width:150px;
    height:50px;
    text-decoration:none;
    text-align:center;
    vertical-align:middle;
    padding-top:10px;
}

.special_link_default a:link,
.special_link_default a:visited,
.special_link_default a:active {
    background:#FF0000 ! important;
}

.special_link_default a:hover {  
    background:#C00 ! important;
}


.special_link_1 a:link,
.special_link_1 a:visited,
.special_link_1 a:active {
  background:#1A1 ! important;
}

.special_link_1 a:hover {
  background:#080 ! important;
}

According to the article adding "! important" should work, but it doesn't.

[pandy]

You have your selectors wrong. They match nothing.

[ADDED]
And you don't need !important.

[CodeKing]

You have your selectors wrong. They match nothing.

[ADDED]
And you don't need !important.

2 of them don't, but the rest do.

[pandy]

Really? So it's working then?

You use contextual selectors like this one here.

CODE

.special_link_default a:hover {  
    background:#C00 ! important;
}

That would match A inside another element with the class 'special_link_default'. You have nothing like that in the HTML. You need a selector that matches A with the class 'special_link_default' inside an element with the id 'leftNav'.

http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

[Darin McGrew]

And even then, you don't need !important at all. You just need a selector that's at least as specific as your current selectors, for example:

CODE

#leftNav a.special_link_default:link { ... }

Note the addition of the ID selector. Without an ID selector, it will never be more specific than the selector that does include an ID selector.

[pandy]

Exactly. Because you have these specific rules later in the source than the general ones the cascade takes care of it.