jQuery jQuery:notセレクタの使い方
jQuery jQuery:notセレクタの使い方
:notセレクタは条件を指定した以外の要素を指定します。
:not(h2)
使用方法はセレクタにnotをつけて()で囲みます。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“:not(h2)”).css({“font-size”:”72px”,”font-style”:”italic”})
});
</script>
<div>
<h3>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
h2以外を72pxとイタリックにしてます。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“h3:not(:last-child)”).css({“font-size”:”72px”,”font-style”:”italic”})
});
</script>
<div>
<h3>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
h3のラスト以外を72pxとイタリックにしてます。 疑似クラスの:を付け忘れないようにしましょう。 動きませんから。 ::last-child
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“h3:not(:nth-child(2n))”).css({“font-size”:”72px”,”font-style”:”italic”})
});
</script>
<div>
<h3>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
偶数以外を72pxとイタリックにしてます。 奇数ですね。
