Solved

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

Posted on 2008-11-02
3
1,079 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 6

Accepted Solution

by:
lpxtech earned 500 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Placeholder text not disappearing in Contact Form 7 2 28
alert on input text 2 25
Silly CSS question - cant figure out 2 22
How to build a web site 17 58
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 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