【jQuery】:first-childを使って最初の子要素を指定する!

最初の子要素を指定するにはjQueryの:first-childを使用します。

jQueryの:first-childとは最初の子要素を指定することができます。

最初の子要素は:only-childやchildren()メソッドなどでも取得できますが、条件を指定しないといませんので少し面倒です。
しかし、:first-childだと最初の子要素をすぐに指定できるので最初の子要素を指定する場合は:first-childを使用した方が便利です。

今回は、jQueryの:first-childを使って最初の子要素を指定する方法について以下の内容で解説していきます。

⚫︎ セレクタを指定して最初の子要素を指定する場合
⚫︎ セレクタを指定せずに最初の要素を指定する場合

⚫︎ jQueryを使用せずに最初の子要素を指定する場合
⚫︎ :only-childやchildren()で最初の子要素を指定する場合
⚫︎ :firstと:first-childの違い

ハルトさん

今回はjQueryの:first-childで最初の子要素を指定する方法について説明していきます。

さとみさん

はい!
お願いします!

:first-childとは

:first-childとはセレクタの最初の子要素を指定することができます。

:first-childの書き方

:first-childの書き方は下記となります。

$の()に要素:first-childを指定することで、セレクタの最初の子要素を指定することができます。

最初の子要素を指定するサンプルコード

:first-childで最初の子要素だけを指定するサンプルコードを紹介します。

セレクタを指定して最初の子要素を指定する場合

セレクタを指定して最初の子要素を指定してみます。

sample.html

index.js

出力結果

:first-childで最初の子要素を指定することができます。
そのため、ボタンを押すと、trタグ要素の最初の子要素であるthタグ要素の背景色が変化しています。

セレクタを指定せずに最初の要素を指定する場合

セレクタを指定せずに最初の要素を指定してみます。

sample.html

index.js

出力結果

:first-childでセレクタを指定せずに最初の要素を指定する場合はどの要素の子要素を取得するのか特定できません。
そのため、ボタンを押すと、全要素の背景色が変化します。

jQueryを使用せずに最初の子要素を指定する場合

jQueryを使用せず、純粋なJavaScriptで最初の子要素を指定してみます。

sample.html

index.js

出力結果

thタグ要素の背景色が変わったことから、jQueryを使用せずJavaScriptで最初の子要素を指定しています。

さとみさん

jQueryを使わず同じことを実行させようとすると、とてもコードが長くなるんですね!
これだとjQueryの方がとても便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

:only-childやchildren()で最初の子要素を指定する場合

:only-childやchildren()で最初の子要素を指定する場合を見てみます。

sample.html

index.js

出力結果

:only-childやchildren()で最初の子要素を指定することはできますが、find()やセレクタ指定など条件を加える必要があります。

さとみさん

:only-childやchildren()で最初の子要素を指定することはできますけど、find()やセレクタの指定をしないといけないので少し手間がかかりますね!
これだと:first-childを使った方が便利です!

ハルトさん

そうですね。
最初の子要素を指定するならあきらかに:first-childの方が良いですよね。

:firstと:first-childとの違い

最初の子要素を指定するには:first-child以外にも:firstを使用する方法もありますが、:firstと:first-childとの違いは指定する最初の子要素の個数が異なる個数が異なるということです。

:firstの場合はセレクタに一致する一番最初の要素のみを指定しますが、:first-childの場合はセレクタに一致する最初の要素を全て指定するようになります。

sample.html

index.js

出力結果

:firstの場合はセレクタに一致する一番最初の要素であるtable1クラスのthタグを指定しています。
しかし、:first-childの場合はセレクタに一致する最初の要素であるtable1クラスとtable2クラスのthタグを指定しています。

今回のポイント

:first-childで最初の子要素を指定

⚫︎ 最初の子要素を指定するにはjQueryの:first-childを使用する

⚫︎ 最初の子要素を指定するには$()の中に「$要素:first-child」を指定する

⚫︎ セレクタを指定せずに最初の要素を指定すると最初の子要素を認識できず、全体の要素を取得する

⚫︎ :only-childやchildren()で最初の子要素を指定することはできるが、:first-childの方が楽に指定できる

⚫︎ :firstと:first-childとの違いは指定する最初の子要素の個数が異なるということである

関連記事

jQueryの:last-childで最後の子要素を指定する方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し