jQueryのセレクタ:firstと:first-childの違い

知らなかったのでメモ
(:last,:last-childも同じ)

$('ul li:first')
すべてのulタグ内をあわせたliタグの中の最初の要素を選択

$('ul li:first-child')
各ulタグ内にあるそれぞれのliタグの最初の要素を選択

つまり

$('ul li:first').css('color','red');

<ul>
  <li>リスト1</li> //ここだけ赤
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

$('ul li:first-child').css('color','red');

<ul>
  <li>リスト1</li> //赤
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
<ul>
  <li>リスト1</li> //赤
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
<ul>
  <li>リスト1</li> //赤
  <li>リスト2</li>
  <li>リスト3</li>
</ul>