Child selector bug?

by Bruno G.

HTML

<table id="rec" border="1" cellpadding="4">
	<tr>
		<td id="wrong">This TD should NOT be colored
			<table border="1" cellpadding="4">
				<tr>
                    <td>but this one SHOULD<br/><input type="text"/></td>
                </tr>
			</table>
		</td>
	</tr>
</table>
<input type="button" id="colorB" value="Bad — .has() method"/><br/><input type="button" id="colorG" value="Good — :has() selector"/>

JavaScript

$(document).ready(function(){
	$('#colorB').click(function(){
        $('td').css('background-color','');
		$('#rec td').has('> input').css('background-color', 'red');
	});
	$('#colorG').click(function(){
        $('td').css('background-color','');
        $('#rec td:has(> input)').css('background-color', 'green');
	});
});