今回は目的の要素を探し出す色々な指定方法をご紹介していきたいと思います。
webページ（HTML）はDOMと呼ばれる階層構造になっており、その階層構造を上手く利用して目的の要素を探し出すことができます。
それではいってみましょう！
Menu
【:first】先頭
:first
下記の例はthreeクラスの子の先頭のみが赤色に変わります。
1 2 3 4 5 | $(function() { $("button").click(function() { $(".three>:first").css("color","red"); //クラスthreeの子の先頭の要素 }) }); |
【:eq()】インデックス指定
:eq(インデックス)
下記の例はthreeクラスの子の指定したインデックスの要素が赤色に変わります。
※インデックスの数字は0から数えるので注意
1 2 3 4 5 | $(function() { $("button").click(function() { $(".three>:eq(3)").css("color","red"); //クラスthreeの子の指定したインデックス }) }); |
【:gt()】インデックスより大きい
:gt(インデックス)
下記の例はthreeクラスの子のli要素のインデックス番号より大きいli要素が赤色に変わります。
※インデックスの数字は0から数えるので注意
1 2 3 4 5 | $(function() { $("button").click(function() { $(".three>li:gt(0)").css("color","red"); //クラスthreeの子のインデックスより大きい }) }); |
【:lt()】インデックスより小さい
:lt(インデックス)
下記の例はthreeクラスの子のli要素のインデックス番号より小さいli要素が赤色に変わります。
※インデックスの数字は0から数えるので注意
1 2 3 4 5 | $(function() { $("button").click(function() { $(".three>li:lt(2)").css("color","red"); //クラスthreeの子のインデックスより小さい }) }); |
【:even】偶数
:even
下記の例はfiveクラスの子の偶数の要素が赤色に変わります。
※インデックスの数字は0から数えるので注意
1 | $(".five>:even").css("color","red"); |
【:odd】奇数
:odd
下記の例はfiveクラスの子の奇数の要素が赤色に変わります。
※インデックスの数字は0から数えるので注意
1 | $(".five>:even").css("color","red"); |
【:not()】～以外
:not(セレクター)
下記の例はulクラスのone以外の要素が赤色に変わります。
1 2 3 4 5 | $(function() { $("button").click(function() { $("ul:not(.one)").css("color","red");//ul oneクラス以外 }) }); |
【:contains()】～が含まれていたら
:contains(‘検索文字’)
下記の例はliに親が含まれていたら赤色に変わります。
1 | $("li:contains('親')").css("color","red"); |
【:header】見出し（hタグ）
$(“:header”)
下記の例は見出し（hタグ）が赤色に変わります。
1 | $(":header").css("color","red"); //見出し |
まとめ
今回ご紹介した階層セレクタはごくわずかの例です。JQueryにはまだまだ他の要素の指定方法が多数ありますので、もしご興味がありましたら他にも試してみてください。
それとコードを記述するエディターはショートカットキーなので階層を自動で整えてくれる機能が備わっているものの使用することをお勧めします。
安易な考えでメモ帳やその他このような機能が付いていないエディタをご使用されてると、サイト上の表示とDOM（階層構造）での表示が違うので不具合が出た場合に時間がかかってしまいます。
ちなみに私はVScodeを使用しています。ものすごく軽くて多機能なので超おすすめですよ！もし使ってみたいというなら下記からダウンロードできます。
https://code.visualstudio.com/?wt.mc_id=DX_841432
以上です。
