CSS Style inheritance/overloading

Question

Hello!

I have a web page that, at a certain point, displays a navigation bar which is nothing more than a list (ul) of a elements. Most of the style rules for said a elements is common. The only part that should change is the image to show which can be guessed from the id tag of each li element of the list.

So here's the question:

Is there a way in CSS to define a something like a "base" style for all the a elements and then set the image depending on the id? Maybe not (http://stackoverflow.com/questions/641217/css-control-inheritance-inheriting-other-control-styles) but I'd like to be certain.

I tried:

#nav li a {
    /*This would be the 'base' For all the "a"s inside a 
      list inside an element with id=nav (nav -> navigation)*/
 background-color: transparent;
 background-repeat: no-repeat;
 background-position: 0 -58px;
 border-left: thin #444444 solid;
}


#nav li#settings a {
 background: url(../images/nav_settings.png);
}

#nav li#media a {
 background: url(../images/nav_media.png);
}

#nav li#user a {
 background: url(../images/nav_admin.png);
}

But it doesn't seem to work... The "base" style is overwritten...

Thank you in advance!

Answer 1

In your particular situation, use the background-image CSS directive. When you use background you're resetting all of the previously set background-* properties.

Like this - Example:

#nav li#settings a {
 background-image: url(../images/nav_settings.png);
}

#nav li#media a {
 background-image: url(../images/nav_media.png);
}

#nav li#user a {
 background-image: url(../images/nav_admin.png);
}

Answer 2

You can set a "base", or default, value for any tag. In your case, you should use the id's on the anchors instead of the parent tags:

a#user, etc.

And, as stated by John, use background-image instead of background for the anchors, because setting background sets all of the background's properties (background-repeat, background-color, etc.)