$(function(){ /* :contains */ //ul liの「red」というテキストを含む要素赤くする $("ul.contains li:contains('red')").css("color", "red"); /* :empty */ //ul liで要素が空のものに「無いです!」というテキストを加えて赤くする $("ul.empty li:empty").text("無いです!").css("color", "red"); /* :has */ //ul liでspanを持ったものだけ赤くする $("ul.has li:has(span)").css("color", "red"); /* :parent */ //ul li内のspanをもった親要素だけ赤くする $("ul.parent li span:parent").css("color", "red"); //end });
<h2 class="clear">:contains</h2> <ul class="contains"> <li>list0</li> <li>list1(red)</li> <li>list2</li> <li>(red)list3</li> </ul> <h2 class="clear">:empty</h2> <ul class="empty"> <li>list0</li> <li>list1</li> <li>list2</li> <li></li> </ul> <h2 class="clear">:has</h2> <ul class="has"> <li><span>list0</span></li> <li>list1</li> <li>list2</li> <li><span>list3</span></li> </ul> <h2 class="clear">:parent</h2> <ul class="parent"> <li>list0</li> <li>list1</li> <li>list2</li> <li><span>list3</span></li> </ul>
.clear{clear:both;} h2{padding:15px 0 5px 10px; font-size:20px; color:blue; border-top:1px solid #eee; } ul{margin:15px;} li{padding:2px 0;}