jQuery - 子フィルター
公開日：2018-12-10
更新日：2019-05-14
更新日：2019-05-14
1. 概要
子フィルターで要素を絞り込みます。
セレクタで指定した要素の階層の、先頭の要素が選択されます。
複数選択される可能性があります。
最初に見つかった要素だけを指定したい場合には、:first を使います。
セレクタで指定した要素の階層の、先頭の要素が選択されます。
複数選択される可能性があります。
最初に見つかった要素だけを指定したい場合には、:first を使います。
$(セレクタ:first-child)
$(セレクタ:last-child)
$(セレクタ:nth-child(番号))
2. サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="a">
<div>
<div id="a1">A-1</div> <!-- 赤 -->
<div id="a2">A-2</div>
<div id="a3">A-3</div> <!-- 青 -->
<div id="a4">A-4</div>
<div id="a5">A-5</div> <!-- 黄 -->
</div>
<div>
<div id="b1">A-1</div> <!-- 赤 -->
<div id="b2">A-2</div>
<div id="b3">A-3</div> <!-- 青 -->
<div id="b4">A-4</div>
<div id="b5">A-5</div> <!-- 黄 -->
</div>
</div>
<!-- Script -->
<script>
$(function(){
$("#a div div:first-child" ).css("color", "red");
$("#a div:nth-child(3)").css("color", "skyblue");
$("#a div div:last-child" ).css("color", "yellow");
});
</script>
</body></html>
実行結果：画面
上記の :first-child を :first にすると、セレクタで指定された要素の中の、最初の１つだけ指定されます。
実行結果：画面
