Only change img inside children li

Question

Say my code is as follows:

<ul>
   <li><img /></li>
   <li>
      <ul>
         <li><img /></li>
      </ul>
   </li>
</ul>

I'm trying to set a default size for the first img tag, but not affect the second one. everything I do affects the other one as well. Currently I have tried:

$('ul#gallery > li').find('img').css('width','650px');
$('ul#gallery > li img').css('width','650px');

among others, but nothing works.

Answer 1

Have you tried using the jQuery :first selector?

$("li img:first").css('width','650px');

• http://api.jquery.com/first-selector/

Answer 2

I don't see a id="gallery" in your example, but assuming the following code (only the outer <ul> has the gallery id):

<ul id="gallery">
   <li><img /></li>
   <li>
      <ul>
         <li><img /></li>
      </ul>
   </li>
</ul>

then the appropriate CSS selector is ul#gallery > li > img.

Answer 3

$('ul#gallery > li > img').css('width','650px');