子孫セレクター
指定した親要素から下の階層の要素すべてを選択します。
↓下の例ではliの要素の中のすべてのspanが選択され文字色が赤色になります。
html
<ul> <li><span>リスト</span>1</li> <li><em>リスト</em>2</li> <li><a href=""><span>リスト</span>3</a></li> <li><strong>リスト</strong>4</li> <li><em>リスト</em>5</li> <li><strong>リスト</strong>6</li> </ul>
jQuery
$(function(){
$('li span').css('color', 'red');
});
処理結果
子セレクター
指定した親要素から直下の階層にある要素を選択します。
↓下の例ではli > aの下のspanタグは直下ではないため選択されません。
html
<ul> <li><span>リスト</span>1</li> <li><em>リスト</em>2</li> <li><a href=""><span>リスト</span>3</a></li> <li><strong>リスト</strong>4</li> <li><em>リスト</em>5</li> <li><strong>リスト</strong>6</li> </ul>
jQuery
$(function(){
$('li>span').css('color', 'red');
});
処理結果
隣接セレクター
指定した要素と隣接している要素を選択します。
↓下の例ではli.fourと隣接しているli.fiveが選択されます。
html
<ul> <li class="one">リスト1</li> <li class="two">リスト2</li> <li class="three">リスト3</li> <li class="four">リスト4</li> <li class="five">リスト5</li> <li class="six">リスト6</li> </ul>
jQuery
$(function(){
$('.four+li').css('color', 'red');
});
処理結果
間接セレクター
指定した要素からあとに続く要素を選択します。
↓下の例ではli.twoからあとに続く、li.threeからli.sixまでが、選択されます。
html
<ul>
<li class="one">リスト1</li>
<li class="two">リスト2</li>
<li class="three">リスト3</li>
<li class="four">リスト4</li>
<li class="five">リスト5</li>
<li class="six">リスト6</li>
</ul>
jQuery
$(function(){
$('.two~li').css('color', 'red');
});
処理結果
