Identical nested divs hover effect

You need two different CSS classes for them. Since you have both Div's use the same class="box", then the .box:hover command would be triggered on both div's.

For the css, you can set it so that only the inner .box class gets the hover command:

.box .box:hover { border-color: red; }

Solution: http://jsfiddle.net/2hDB9/2/

If all classes must be the same (as your title implies), then this isn't completely possible in pure CSS.

All the current answers only address part of the answer.. but if you insist, here is a jQuery solution - all elements have the same class, though I suggest you rename them, and avoid jQuery altogether.

Nonetheless, here is a solution, which doesn't require the class names to be changed:

jsFiddle example - works for all levels.

$(".box").children().hover(function () {
    $(this).parent().css("border-color", "grey");
    $(this).css("border-color", "red");
}, function () {
    $(this).parent().css("border-color", "");
    $(this).css("border-color", "");
});

You should give it a different class. You have the option of using JavaScript to detect which element is being hovered, but I wouldn't suggest this.

You could try

.container > .box > .box:hover

Updated: http://jsfiddle.net/2hDB9/11/

Basically, there's not an easy way. You kind of have to fake it, so to speak. See the code below:

HTML:

<div class="container">
    <div class="box1">
        Line 1.
    </div>
    <div class="box2">
        Line 2.
    </div> 
</div>

CSS:

.container {
    height:50px;
    padding:50px;
}

.container:hover {
}

.box2 {
    height:50px;
    width:75%;
    border:2px solid black;
    position: relative;
    top: -110px;
}

.box2:hover {
    border:2px solid red;
}

.box1{
    position: relative;
    height:50px;
    padding: 20px 20px 40px 20px;
    top: -50px;
    left: -50px;
    border:2px solid black;

}

.box1:hover{
    border:2px solid blue;
}

This makes box2 "appear" to be a child of box1 by using relative positioning, when in reality, box1 is not the parent of box2, they are siblings.