Targeting unnamed divs / reusing names

how?

[matthewwithanm]

Right now, my site has a bunch of nested divs that look something like this...

<div id="bert">
 <div id="bert-content">
 <div id="ernie">
  <div id="ernie-content">
  </div>
  <div id="elmo">
  <div id="elmo-content">
  </div>
  </div>
 </div>
</div>

Now I'd like to eliminate all these "-content" names (though the divs must stay). Ideally, I'd be able to either name each of them just "content" (or not name them at all) and target them with CSS selectors, but IE doesn't support selectors. Has anybody else bumped into a situation like this and, if so, what was your solution?

[Farix]

<div id="bert">
<div class="content">
<div id="ernie">
<div class="content">
</div>
<div id="elmo">
<div class="content">
</div>
</div>
</div>
</div>
</div>

Then do this in your CSS.

#bert {}
#bert .content {}
#ernie {}
#ernie .content {}
#elmo {}
#elmo .content {}

[matthewwithanm]

If you do that, then 'div#child .content' will inherit all of the styles you assign 'div#parent .content' (assuming of course that 'parent' encloses 'child').

This was actually the first thing I thought of...would've worked well, too, if I didn't need to nest divs.