CSS, How to Reference specific nested div section....

SamJolly
SamJolly used Ask the Experts™
on
Hi,

I need to reference a specific DIV section and border it.

Sample html:
<BODY>
<DIV id="Section">
       <DIV> <!-- need to border this div-->
               <DIV></DIV> <!-- No border here -->
       </DIV>    
       <DIV> <!-- need to border this div-->
               <DIV></DIV> <!-- No border here -->
       </DIV>
<./DIV>

I think the CSS rule should be something like

DIV #Section DIV {border:solid 1px}

I just want to border one level of DIV below the section DIV. There may be multiple DIV at this level which would all need bordering.

Thanks in advance.

Sam
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010

Commented:
You could do something like this:

DIV #Section DIV {border:solid 1px}
DIV #Section DIV DIV {border:none}

Author

Commented:
Hi,

Yes an ideas... thanks.


I have just been reading about child and sibling selectors ie

DIV #Section > DIV {border:solid 1px}

DIV #Section + DIV {border:solid 1px}

Just experimenting now....

Sam
Top Expert 2010

Commented:
Or since You need border only for the first sublevel, why dont You add class to it:

<BODY>
<DIV id="Section">
       <DIV class="sub1"> <!-- need to border this div-->
               <DIV></DIV> <!-- No border here -->
       </DIV>    
       <DIV class="sub1"> <!-- need to border this div-->
               <DIV></DIV> <!-- No border here -->
       </DIV>
<./DIV>

And css would then be:

DIV #Section .sub1 {border:solid 1px}

Just a thought.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hi,

Yes I could do this, but all these sibling have different classes allocated to them already hence the reason for seeing if there was a child type selector available that worked.... my case in IE7.

So my actual code is :

<BODY>
<DIV id="Section">
       <DIV class="sub1"> <!-- need to border this div-->
               <DIV></DIV> <!-- No border here -->
       </DIV>    
       <DIV class="sub2"> <!-- need to border this div-->
               <DIV></DIV> <!-- No border here -->
       </DIV>
<./DIV>


Where Sub 1 is coloured different to Sub2 for example, but they all need black border.

Thanks for help thus far.

Sam
Top Expert 2010
Commented:
Test this piece of code. You'll understand Im sure. I sed borders on sublevels to emphasize the point.

<HTML>
<HEAD>
<style type="text/css">
DIV#Section DIV {border:1px solid #000000; padding: 10px; margin: 10px;}
DIV#Section DIV DIV {border: 1px solid #FFCC00;}
</style>
</HEAD>
<BODY>
<DIV id="Section">
       <DIV>Sublevel 1
               <DIV>Sublevel 2
                           <DIV>Sublevel 3</DIV>
               </DIV>
       </DIV>    
       <DIV>Sublevel 1
               <DIV>Sublevel 2</DIV>
       </DIV>
</DIV>
</BODY>
</HTML>

Regards
Bosko

Author

Commented:
Just another idea..... Can you search for a div by ID and then get its Ascendant (Father) tag. This would solve my problem.

So:

DIV #EditButtons Parent DIV {.....}

???? Ideas,

THanks,

Sam

Author

Commented:
Just found that parent selectors are not supported in CSS2 or 3...

Sam
Top Expert 2010

Commented:
That thing is not possible with CSS only as far as I know. You would need to use jquery or something similar.
Do You have problem different from one described in Your topic, or You still cant my solution  to work?
If You have any more details of what You want to achieve, please post.

Bosko

Author

Commented:
Hi Bosko....

Yes your solution is the nearest I can get to making my situation work. However from an eloquence perspective I should be able to use child selectors which would be cleaner if I could get them to work in IE7

i.e div#section>div {....}

But I have your suggestion to fall back on.....

Thanks,

Sam
Top Expert 2010

Commented:
And maybe this is what You want:

DIV#Section DIV {border:1px solid #000000; padding: 10px; margin: 10px;}
DIV#Section * DIV {border: 1px solid #FFCC00;} /*unlimited number of sublevels that dont need border in Your question*/

Notice the use of universal * selector.

Bosko

Author

Commented:
THx for the great help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial