homepage Welcome to WebmasterWorld Guest from 54.163.91.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
select div and elements inside it
dupalo




msg:4422426
 11:05 pm on Feb 27, 2012 (gmt 0)

HI there, I am styling my website a little and I was wondering if the following is possible.
In my html I have this situation:

...
<div id = "first_box">
<div class = "box_picture">
<a href = "egypt.htm"><img src = "images/travel_page/travels_boxes_1.jpg" alt = "" style="border:0"></a>
</div><!-- END OF box_picture -->
<div class = "text_box_italy_egypt">
<a href = "egypt.htm">Egypt</a>
</div><!--END OF text_box -->
</div><!-- END OF FIRST BOX -->
...

3 containers each with a border (some transparent some not)

#first_box, #second_box, #third_box
{
border:1px solid black;
width:239px;
height:250px;
float:left;
margin-right:20px;
}


. What I am trying to achieve is that when I hover on the outer container (for the first box is #first_box)all the three of them (#first_box, .box_picture, .text_box_italy_egypt) will have their borders changed to yellow.
My css so far is this:

#first_box:hover
{
border:1px solid yellow;
}

but somehow I need to target also the other two container at the same time so something like

#first_box:hover
{
/*also select the other 2 divs and change the color border*/
border:1px solid yellow;
}


Is this achievable?
thanks

[edited by: alt131 at 12:48 am (utc) on Feb 28, 2012]
[edit reason] Thread Tidy [/edit]

 

alt131




msg:4422636
 12:58 pm on Feb 28, 2012 (gmt 0)

Hi dupalo, thanks for the great explanation. Yes this is achievable, and with the advanced selectors there are now many ways you could select these elements. One common way is to explicitly state the id/class for each element, but because the child elements you are trying to select are both <divs> I think this is the most simple and direct method:

#first_box:hover, #first_box:hover div {
border:1px solid yellow;
}

That selects #first_box when it is hovered, and also selects any child divs when #first_box is hovered as well.

dupalo




msg:4422838
 9:27 pm on Feb 28, 2012 (gmt 0)

ah brilliant, works a treat thanks alt131!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved