Inheritance Confusion...

Hi There -

Am having some confusion with CSS inheritance.

I'm working with a Drupal where I don't have control over the html output and everything seems to have extra layers of divs generated by the cms.

I have a large container div with id=forum.
Nested inside a table inside that div are more divs.
Inside of that I have links inside a div that has class=name.

Like this:

<div id="forum">
<ul>
</ul>
<table>
<thead>
</thead>
<tbody>
<tr class="odd">
<td class="container" colspan="4">
<div style="margin-left: 0px;">
<div class="name">
</div>
<div class="description">Containers that will look OK as and when we decide to use forum Containers.</div>
</div>
</td>
</tr>
<tr class="even">
<td class="forum">
<div style="margin-left: 30px;">
<div class="name">
<a href="/forums/samplecontainer/sample-forum-for-sample-container">Sample forum for sample container</a>
</div>


How do I address these so that only the links within the forum are affected by this rule? The following rule is affecting all of the links in the whole site, no matter what the id or class. I thought I understood how to address these, but it's clear to me now that I don't. I'd appreciate any help I can get with this.

Just to be clear, I'm trying to address the text that says 'Sample forum for sample container' in the very last div in the code above.

Here's what I was trying to use:

#forum .name a:link, a:visited, a:hover {
color:#F79239;
}


I've also tried permutations; #forum.name a:link etc. I don't want to be 'lucking' into something that sorta works. I really want to nail this.

Try this site.

http://dorward.me.uk/www/css/inheritance/

http://exitfegs.co.uk/Sources.html

Has lots of potential.

Frank

Here's what I was trying to use:

#forum .name a:link, a:visited, a:hover {
color:#F79239;
}


I've also tried permutations; #forum.name a:link etc. I don't want to be 'lucking' into something that sorta works. I really want to nail this.I’m guessing that you don’t understand how selector syntax works. Look at your selector again with line breaks as shown below.

#forum .name a:link,
a:visited,
a:hover { …

See the problem yet? Try a selector like that shown below.

#forum .name a:link, #forum .name a:visited, #forum .name a:hover { …

Even the above selector is redundant though unless you want to differentiate styling between anchor elements with a href attribute and those without. If not, the following selector would probably suffice.

#forum .name a { …

Tangential Information
I do realize that you said that you lack control over the HTML output. Despite this, I would point out that the HTML you’ve shown contains errors: the ul and thead elements are missing required child elements.

Thanks you guys! You're awesome!