• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 168
  • Last Modified:

How to add to or override part of a class definition

In my file, I have a pre-set definition of a class, say ".nav", and it has a number of properties:

.nav {position: relative; width: 980px; display: inline-block; border-bottom: 1px solid #126a13; padding: 12px 0 8px 0; background: url('images/nav_bg.gif') repeat-x top center; clear: both; text-transform: uppercase; line-height: 1em; font-weight: 400;}

Lower in the page, I want to be able to replace just one property, the background, with a new value e.g.

.nav {background: url('../../../image-new/nav_bg_new.gif')}

The problem is that it seems to replace the entire first definition of .nav, instead of replacing just the one value, for backgroun. Alternatively I can get the desired effect by repeating the entire first class definition with the one value changed, but I wonder if there is a way in CSS to say "keep all the existing properties, just replace this one". Thanks in advance.
  • 2
1 Solution
Dave BaldwinFixer of ProblemsCommented:
"keep all the existing properties, just replace this one".
No but that is the way it works.  However the original background defintion is "background: url('images/nav_bg.gif') repeat-x top center;" and your replacement is "background: url('../../../image-new/nav_bg_new.gif')".  Note that you do not have a ';' at the end of your replacement.  Under some circumstances that can throw things off.  It never hurts to add it like "background: url('../../../image-new/nav_bg_new.gif');".
DavidInsight and Energy SpecialistAuthor Commented:
Excellent, and thank you. I had not noticed the additional values that I omitted. I also added the trailing ";" to be safe. Now everything works and is cleanly coded. Much better. If interested, the site is http://tildet.com.
Dave BaldwinFixer of ProblemsCommented:
You're welcome, glad to help.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now