Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

select div and elements inside it



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;

. 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:

border:1px solid yellow;

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

/*also select the other 2 divs and change the color border*/
border:1px solid yellow;

Is this achievable?

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


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

WebmasterWorld Senior Member 5+ Year Member

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.


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

ah brilliant, works a treat thanks alt131!

Featured Threads

Hot Threads This Week

Hot Threads This Month