jQuery 隣接セレクタと子セレクタのチャイルドセレクタ
jQuery 隣接セレクタ
隣接セレクタとは隣に接しているセレクタの二つ目の要素を指定します。
隣り合っているとなっていますが前後にあるセレクタです。
二つ目の要素とは後ろの要素のことです。
サンプル
$(“h1 + h2″)
要素と要素の間に＋をつけています。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“h1 + h2”).css(“font-size”,”72px”);
});
</script>
<title>
</title>
</head>
<h1>red</h1>
<h2>Green</h2>
</body>
</html>
二つ目の要素h2だけ72pxになりました。
jQuery 子セレクタのチャイルドセレクタ
子セレクタはチャイルドセレクタと言います。
あくまで子要素なので子孫セレクタとは違います。
サンプル
$(“h2 > p”)
要素の間に>をつけます。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“h2 > p”).css(“font-size”,”72px”);
});
</script>
<title>
</title>
</head>
<div>
<h2>red</h1>
<h2><p>Green</p></h2>
</div>
</body>
</html>
