HTMLHelp Forums > Problems overwriting link styles

Full Version: Problems overwriting link styles

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

CodeKing

Nov 20 2007, 06:18 PM

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

Nov 20 2007, 06:31 PM

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

Nov 20 2007, 11:23 PM

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

Nov 21 2007, 12:08 AM

You have your selectors wrong. They match nothing.

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

CodeKing

Nov 21 2007, 12:38 PM

QUOTE(pandy @ Nov 20 2007, 11:08 PM)

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

Nov 21 2007, 12:55 PM

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

Nov 21 2007, 01:16 PM

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

Nov 21 2007, 01:57 PM

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

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.