Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2008-11-02
3
Medium Priority
?
1,122 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:Jonathan Greenberg
  • 2
3 Comments
 
LVL 6

Accepted Solution

by:
lpxtech earned 2000 total points
ID: 22864789
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
 
LVL 6

Expert Comment

by:lpxtech
ID: 22864794
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
 

Author Comment

by:Jonathan Greenberg
ID: 22864805
lpxtech, I can't tell you how helpful your answer is!  Thank you so much.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question