はじめに

前回の記事からずいぶん日が空いてしまいました。
前回はひたすらにセレクターを書き連ねましたが、今回はその中でもjQuery独自のセレクターについて掘り下げていきます。

INDEX

1. first/last
2. even/odd
3. eq/lt/gt
4. header
5. contains/has
6. parent

 1.first/last

$(“○○:first”)/$(“○○:last”)

firstセレクターは、ある特定の要素の最初の要素。
lastセレクターは、ある特定の要素の最後の要素、を選択します。

 実行結果

似ている要素として、first-child疑似クラス/last-child疑似クラスがあります。
first-child疑似クラス/last-child疑似クラスは、ある特定の要素を基準点として、最初の子要素/最後の子要素を選択するのに対し、
first/lastは、ある特定の要素（全体）の最初の要素/最後の要素を選択する、という違いがあります。

例えば、以下のHTMLであれば、、

 first/lastの場合→結果

first-child/last-childの場合→結果

2．even/odd

$(“○○:even”)/$(“○○:odd”)

evenセレクターは、ある特定の要素の偶数番目の要素、
oddセレクターは、ある特定の要素の奇数番目の要素、を選択します。
（JavaScriptは数字を0から数えるため、最初の要素は0、つまり偶数になります。）

 実行結果

ちなみにnth-child疑似クラス($(“li:nth-child(even)”)/$(“li:nth-child(odd)”))は、ある特定の要素から数えて偶数もしくは奇数番目を選択します。
よって上の例の場合、nth-child疑似クラスでは、青、赤、青、赤となり、
even/oddでは、赤、青、赤、青となります。

nth-child疑似クラス→結果

3.eq/lt/gt

$(“○○:eq(数字)”)/$(“○○:lt(数字)”)/$(“○○:gt(数字)”)

ある要素の中から特定の順番の要素を選択するのがeqセレクター(equal)、
特定の順番の要素より前を選択するのがltセレクター(less than)、
特定の順番の要素より後を選択するのがgtセレクター(greater than)、です。

 実行結果

上の例では、$(“li:eq(2)”)により、li要素の中の(2)の要素が赤になります。
ただし、JavaScriptでは、0、1、2、と0から数えるのが通例なので、この場合の(2)は3番目を指します。
同様に、$(“li:lt(2)”)により、li要素の中の3番目より前が青、
$(“li:gt(2)”)により、li要素の中の3番目より後が緑、となります。

4.header

$(“○○:header”)

headerセレクターは、h1~h6までのheading要素をまとめて選択します。

 実行結果

5.contains/has

$(“○○:contain(文字列)”)/$(“○○:has(要素)”)

containsセレクターは、ある特定の文字列が含まれている要素を選択します。
hasセレクターは、ある特定の要素Bが含まれている要素Aを選択します。

 実行結果

上の例でわかるように、文字列や要素が含まれている要素全体を選択するという点がポイントです。

6.parent

$(“○○:parent”)

parentセレクターは何らかの子要素やテキストが含まれている要素を選択します。
CSS3セレクターのempty疑似クラス（空の要素を選択する）の逆のセレクターです。

 実行結果

参考

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)