Hover effect on parents child's child - html

Question

I want on hover on parent, child's child's TEXT ONLY turn red too. Is it possible ?
<div id="row">o
<div id="col" class="col">o o
<div id="colChild" class="col-child">o o o Turn Me Red</div>
</div>
</div>
CSS
#row {
width: 300px;
height:100px;
border: 3px solid red;
}
#row:hover {
background-color:pink
}
#col{
padding:5px;
border: 2px solid blue;
}
#colChild {
padding:5px;
border: 2px solid black;
}
http://jsfiddle.net/NHbn8/235/
Out of Context information
In real these are rows of a table and they will also on select keep there hover state (but it's out of context for now)

Answer 1

Use this on hover parent #row:hover > .col > .col-child{background:red;}

Answer 2

http://jsfiddle.net/33mhdju6/
#row {
width: 300px;
height:100px;
border: 3px solid red;
}
#row:hover #colChild{
background-color:red
}
#row:hover {
background-color:pink
}
#col{
padding:5px;
border: 2px solid blue;
}
#colChild {
padding:5px;
border: 2px solid black;
}

Answer 3

Try this
#row:hover #colChild {
color:red;
}
demo

Answer 4

check this
#colChild:hover{
background-color:red
}

Answer 5

I am not sure this will work, but I think it would:
<div id="row">o
<div id="col" class="col">o o
<div id="colChild" class="col-child">o o o Turn Me Red</div>
</div>
</div>
Css:
#colChild:hover {
background-color:red;
}
DEMO

Answer 6

You can use css selectors property to apply the effects to any partiticular div. A list of the CSS selectors has been given in the link below..
http://www.w3schools.com/cssref/css_selectors.asp