セレクターその17(CSSの属性セレクター[attribute='value'] [attribute!='value'] [CSS3])
前エントリにさらに等号と不等号の条件をつけることが可能。
サンプルは指定した属性の値が同じく指定した値に等しいものを抽出する。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("[class='fourth']").css("color","red"); $("#table0 tr td[colspan='2']").css("background-color","lightblue"); $("#table1 tr td[colspan!='2']").css("background-color","lightgreen"); }) </script> </head> <body> <ul> <li id="first">テキストテキストテキストテキストテキスト</li> <li class="second">テキストテキストテキストテキストテキスト</li> <li id="third">テキストテキストテキストテキストテキスト</li> <li class="fourth">テキストテキストテキストテキストテキスト</li> </ul> <table id="table0" border="1" style="width: 500px;"> <tr><td>あ</td><td colspan="2">い</td><td>え</td><td>お</td></tr> <tr><td colspan="2">か</td><td>く</td><td>け</td><td>こ</td></tr> <tr><td>さ</td><td>し</td><td colspan="3">す</td></tr> </table> <br/> <table id="table1" border="1" style="width: 500px;"> <tr><td>た</td><td colspan="2">ち</td><td>て</td><td>と</td></tr> <tr><td colspan="2">な</td><td>ぬ</td><td>ね</td><td>の</td></tr> <tr><td>は</td><td>ひ</td><td colspan="3">ふ</td></tr> </table> </body> </html>
属性なら何でもOKっぽい。
自前チェックはcolspanでやってみたけど、#table0の方はちゃんとcolspan="3"になってるサ行は除外され、
#table1の方はcolspan="2"以外のものが全て背景色が薄い緑になった。