CSS incoerence

Hello, i have this code:

<head>
<style>
.banana td {
	width:100px;
	height:100px;
}
.banana:hover td {
	background-color:#440E0E;
}
</style>
</head>
<body>


<table border="1">
	<tr class="banana">
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
</body>

And the CSS doesnt work, but if i change to this:

<head>
<style>
.banana td {
	width:100px;
	height:100px;
}
tr.banana:hover td { /*changed here*/
	background-color:#440E0E;
}
</style>
</head>
<body>


<table border="1">
	<tr class="banana">
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
</body>

Now it works!
Why?

Found the answer :wink:

http://www.quirksmode.org/css/quirksmode.html