親要素内に指定した子要素が1つしか無いものだけを選択できる."親要素 子要素:only-child"で記述 jQuery $(function(){ $("li span:only-child").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

指定要素以外の要素を選択できる。"not(指定要素) "で記述。 jQuery $(function(){ $("li:not(.second)").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

指定要素の後にある要素全てを選択できる。"指定要素 ~その後の要素"で記述。 jQuery $(function(){ $(".second~ li").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

指定要素の次にある要素を選択できる。"指定要素+その次の要素"で記述。 jQuery $(function(){ $(".second+ li").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

親要素の直下にある子要素を選択できる。"親要素＞子要素"で記述。 jQuery $(function(){ $("li>strong").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

複数のセレクターをカンマ区切りで指定できる。"選択要素＋選択要素+..." jQuery $(function(){ $("#first,.fouth").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

指定した要素内に含まれる子要素を*(アスタリクス)で全て指定出来る。 jQuery $(function(){ $("ul *").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

<ul> <li id="first"><strong>テキスト</strong></li> <li class="second"><em>てきすと</em></li> <li id="third"><span>text</span></li> <li class="fourth"><span>TEXT</span>TEXT</span></li> </ul> jQueryなしの出力結果 テキスト てきすと text TEXTTEXT