Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2008-11-02
3
Medium Priority
?
1,109 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 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

671 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