jQuery first-childとlast-child
jQuery first-child
first-childは一番最初の子要素を指定します。
$(“要素:first-child “)
要素を:でつなきます。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“h3:first-child “).css({“font-size”:”72px”,”font-style”:”italic”})
});
</script>
<title>
</title>
</head>
<div>
<h3>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
最初のredが72pxとイタリックになってますね。
よくliでサンプルかかれてるけどh3の最初とかこんな使い方もできます。
jQuery last-child
last-childは一番最後のの子要素を指定します。
$(“要素:last-child “)
要素を:でつなきます。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“h3:last-child “).css({“font-size”:”72px”,”font-style”:”italic”})
});
</script>
<title>
</title>
</head>
<div>
<h3>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
最後のBlueが72pxとイタリックになってますね。
