Strange selector issue...

Strange selector issue...

Simple html :

<ul id="col1" >
<li id="weather.ascx" class="widget">
<div class="head">
</div>
<div class="content">
</div>
</li>
</ul>

Now two different ways of trying to access "weather.ascx" :

1) $('[id="weather.ascx"]').find('.content').hide();


2) $('#weather.ascx').find('.content').hide();


Simple selectors called within the success element of AJAX call but the first selector method works the second doesn't. Probably a really simple explanation could someone assist ?