applying style to inner div on hover of outer div [duplicate]

Question

I have some HTML that looks like this:

<div class="TheOuterClass">
    <div class="TheInnerClass">some text</div>
</div>

With the following CSS:

.TheOuterClass{
    width:100px;
    padding:5px 5px;
    background:black;}

.TheOuterClass:hover{
    pointer:cursor;
    background:red;
    color:yellow;}

.TheInnerClass{color:white;}

What I want to do is have the text of the inner div change color on hover of the outer div. How can I do this with CSS only?

The jsFiddle is here

PS: I know it can easily be done with jQuery but this is about doing it with CSS only.

Answer 1

You would use the :hover psuedo-class on the parent element, followed by the child element.

Updated jsFiddle example

.TheOuterClass:hover .TheInnerClass {
    color:blue;
}