css inheritance problem

I have a div that is given a bottom border through the ID tag.. I want to override the border with a class.

I think the problem is something to do with how I am naming the nobdr class in my css.

Thanks for any help!
Reid


HTML HERE:



CSS HERE:

#primary{ border-bottom: 1px #fff solid; width:197px; padding: 0px 0px 20px 15px;}

#primary .nobdr{ border-bottom: none;}

You need to remove the space between "#primary .nobdr". It should be...
#primary.nobdr{ border-bottom: none;}

Having a space between them means the rule only applies to elements with the classname "nobdr" that are children of an element with the id "primary".

Got it... thanks.

may i ask why you want to overide the id?
as id is supossed to be unique to one element,
there wouldn't be much sense to overide it with a class,

simply just have
#primary{ border-bottom:none; width:197px; padding: 0px 0px 20px 15px;}

excellent point.

There are situations where that could be useful. He may have only showed excerpts from his style sheets.

P.S. What he originally had was a descendent selector, not a child selector. It might seem like a minor distinction, but I can't tell you how often I curse IE 5 Win for not supporting child selectors.

The reason is that I wanted the id to still inherit all of the properties of primary. Also, primary has child attributes that I still wanted the div to inherit.

More of my css below:


#primary{ border-bottom: 1px #fff solid; width:197px; padding: 0px 0px 20px 15px;}

#primary A{color: #fff; text-decoration: none; font-weight: bold; display:block; width:150px; margin: 15px 0px 0px 0px;}
#primary A:hover{color: #ff6;text-decoration: underline; font-weight: bold;}


/*tertiary nav*/
#primary a.navA {color: #ff6;}

#tNav {padding: 0px; margin: 0px 0px 0px 15px;}
#tNav A{font-size: 10px; margin:0px;}



#primary.nobdr{ border-bottom: none;}

but this doesn't chang anything

there isn't a point with that class,
to overrule the id, when you just can have it in the id,

the id can just be used once in a document, like on one div tag,
http://www.w3.org/TR/html401/struct/global.html#adef-id

if it had been the other way around i could have understood,

if you had a class .primary which you assign to several elements,
then used a id #nobr to get rid of the border to one of the elements ,

Here is some more information:

I have a css file that is being used across many templates within a site. On each of the templates I am using a div with the id="primary". On some pages I want to override one of the properties the id is inheriting (the bottom border), but I want all the other properties for primary and it's child selectors to apply.


If I just removed the bottom border from the id, all of the other pages that are using the id would also be affected. My choice then is to either override(as i chose to do with the class) or create another unique ID and then duplicate all of the child stuff.

--
Reid

Actally, reid, on the pages where you want to override that particular property setting, you can just use an internal style sheet and set that property on your ID, e.g.

Hmm...

My solution...

adds this HTML
class="nobdr"

and this CSS
#primary.nobdr{ border-bottom: none;}


Yours would add this:

<style type="text/css">
#primary { border-bottom: none;}
</style>


Am I missing something? I'm curious why should I use the internal style sheet over my solution. Don't they both accomplish the same thing with around the same amount of overhead?

Reid