jQueryのfirst・lastメソッドで最初・最後の要素を取得します。また、first・lastをセレクタとして使用します。以下のhtmlの構造で確認します。

<ul>
  <li class="item">HTML・CSS</li>
  <li class="item">Sass</li>
  <li class="item">JavaScript</li>
</ul>

first・lastメソッドに引数は必要ありません。first・lastをセレクタとして使用する場合は「要素:first」・「要素:last」のようにコロンを付けて記述します。

$(function() {
  var result01 = $('.item').first().text();
  console.log(result01);

  var result02 = $('.item:first').text();
  console.log(result02);

  var result03 = $('.item').last().text();
  console.log(result03);

  var result04 = $('.item:last').text();
  console.log(result04);
});

実行結果は以下になります。

HTML・CSS
HTML・CSS
JavaScript
JavaScript

注意点としてfirst・lastメソッドと要素:first・要素:lastのセレクタは、親要素ごとに最初・最後の要素を取得することはできません。

親要素ごとに最初・最後の要素を取得するには、セレクタとして使用できるfirst-child・last-childを使用します。以下のhtmlの構造で確認します。

<ul>
  <li class="item">HTML・CSS</li>
  <li class="item">Sass</li>
  <li class="item">JavaScript</li>
</ul>

<ul>
  <li class="item">jQuery</li>
  <li class="item">Git</li>
  <li class="item">Photoshop・Illustrator</li>
</ul>

first-child・last-childは、first・lastをセレクタとして使用する場合と同様、対象要素の後にコロンを付けて記述します。

$(function() {
  var result05 = $('.item:first-child').text();
  console.log(result05);

  var result06 = $('.item:last-child').text();
  console.log(result06);
});

実行結果は以下になります。親要素ごとに最初・最後の要素を取得しているのが確認できます。

HTML・CSSjQuery
JavaScriptPhotoshop・Illustrator