Question

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 (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);
}