applying style to inner div on hover of outer div

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.


solution

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

Updated jsFiddle example

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