Solved

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

Posted on 2008-11-02
3
1,067 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 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now