セレクタの続き

jQuery

○子セレクタ

・「子」にあたる要素を指定するセレクタ
・[＞]で区切ることで指定できる
HTML

<body>
<ul>
<li>HTML</li>
<li><em>CSS</em></li>
<li><em>jQuery</em></li>
<li>PHP</li>
</ul>
<script>
$(function(){
	$('li > em').css('background','pink');
});
</script>
</body>

↓


○隣接セレクタ

・指定した２つの要素が隣り合っているときにだけ指定した２つ目の要素を指定するセレクタ
HTML

<body>
<h1>最も優先順位の高い見出し</h1>
<h2>次に優先順位の高い見出し</h2>
<h3>その次に優先順位の高い見出し</h3>
<h2>次に優先順位の高い見出し</h2>
<p>ここに本文が入る</p>
<h3>その次に優先順位の高い見出し</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
<script>
$(function(){
	$('h2 + h3').css('background','pink');
});
</script>
</body>

↓


○間接セレクタ

・同じ親要素をもつ要素（兄弟関係）で、指定した要素よりも後に登場する弟要素を指定するセレクタ
HTML

<body>
<ul>
<li class="frist">HTML</li>
<li class="second">CSS</li>
<li class="third">jQuery</li>
<li class="fouth">PHP</li>
</ul>
<script>
$(function(){
	$('.second ~ li').css('background','pink');
});
</script>
</body>

↓


○:first-child 擬似クラスセレクタ

・1番最初に登場する要素だけを指定できるセレクタ
・↓の場合だと1番最初に登場した[li]に指定される。
HTML

<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
<script>
$(function(){
	$('li:first-child').css('background','pink');
});
</script>
</body>

↓


○:not 擬似クラスセレクタ

・指定した条件以外を指定できるセレクタ
HTML

<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
<script>
$(function(){
	$('li:not(:first-child)').css('background','pink');
});
</script>
</body>

↓