select div and elements inside it

[dupalo]

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]

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]

ah brilliant, works a treat thanks alt131!