CSS: How To Affect A Div Class Within A Div ID

I have a div with a class attribute that appears several times on my page, but I want to affect only the first iteration with CSS.  Each time it appears, it's inside a bunch of other divs.  The one that I want to affect is within 8 divs, the top one of which has a unique ID.  This is what the 8 divs look like in my XHTML:

  <div id="top">
  <div class="floatbox ie_fix_floats">
  <div class="topblock width100 float-left">
  <div class="mod-default">
  <div class="module default">
  <div class="module-2">
  <div class="module-3">
  <div class="module-4 deepest">

The div I want to affect is the bottom one, with div class 'module-4 deepest'.  Eight levels of divs up is the div with the unique ID: 'top'.

Is there some way to write the css so as to effect only the div with class 'module-4 deepest' inside of the div with ID 'top'?

Thanks.
Jonathan GreenbergAsked:
Who is Participating?
 
lpxtechConnect With a Mentor Commented:
Hi,

you can nest css like so.
<style type="text/css">
#top .module-4 {
  // CSS in here
}
</style>
<div id="top">
  <div class="floatbox ie_fix_floats"></div>
  <div class="topblock width100 float-left"></div>
  <div class="mod-default"></div>
  <div class="module default"></div>
  <div class="module-2"></div>
  <div class="module-3"></div>
  <div class="module-4 deepest"></div>
</div>

Open in new window

0
 
lpxtechCommented:
also, the class="module-4 deepest" part is 2 seperate classes. the module-4 class and the deepest class

you could give 10 classes the module-4 class and style them 1 way and only give the last one the class="module-4 deepest" classes and style the deepest class as well.
0
 
Jonathan GreenbergAuthor Commented:
lpxtech, I can't tell you how helpful your answer is!  Thank you so much.
0
All Courses

From novice to tech pro — start learning today.