セレクターその７（子セレクター[CSS２]）
入れ子と別のセレクター（IDとclass）も試してみた。
特定の要素の直下に配置された要素を指定できるのが「子セレクター」です。子セレクターは親要素と子要素を >（大なり/greater than）で結びます。
<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() { //「>」を使う。この場合、liタグの「直下」にあるstrongタグのみが対象となる。 $("li > strong").css("color","red"); //「>」の両サイドのスペースを削除しても大丈夫な模様。 $("li>div").css("color","blue"); //「>」を連続して使ってみる。 $("li>div>span").css("color","green"); //セレクターにIDを使ってみる。 $("li>#hoge").css("color","pink"); //セレクターにclassを使ってみる。 $("li>.fuga").css("color","yellow"); }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <ul> <li><strong>テキスト</strong>テキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li><div><strong>テキスト</strong>テキストテキストテキスト<span>テキスト</span></div></li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキスト<span id="hoge">テキスト</span>テキスト</li> <li>テキストテキストテキストテキスト<div class="fuga">テキスト</div></li> </ul> </body> </html>
全部いけるな。
セレクターその８（隣接セレクター[CSS2]）
隣接セレクター
指定したセレクターの次に出現するセレクターを指定できる。
「基準となるセレクター + 次に隣接しているセレクター」のフォーマットで指定。
idだけでなく、classや子セレクターとも混ぜてみた。
<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() { //フツーに。 $("#second + li").css("color","red"); //「+」の両サイドの半角スペースを削除 $("#third+li").css("color","red"); //classとIDと子セレクターを絡めて指定 $(".class0+#hoge>.class1").css("color","blue"); }) </script> </head> <body> <ul> <li id="first">テキストテキストテキストテキストテキスト</li> <li id="second">テキストテキストテキストテキストテキスト</li> <li id="third">テキストテキストテキストテキストテキスト</li> <li id="fourth">テキストテキストテキストテキストテキスト</li> <li class="class0">テキストテキストテキストテキストテキスト</li> <li id="hoge"><span class="class2">テキスト</span>テキスト<span class="class1">テキスト</span>テキストテキスト</li> <li class="class1">テキストテキストテキストテキストテキスト</li> <li id="hoge">テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
セレクターその９（first-child擬似クラス[CSS2]）
特定のセレクターのうち最初に登場する要素のみを指定するセレクター。
ってことなんだけど、いまいちわかんねー。
サンプルではli要素を指定しているけど、liは連続していることが前提なのか？
と思ったので、ちょっと自分でも要素を追加してみた。
<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() { $("li:first-child").css("color","red"); //連続しているdiv要素に適用したつもりだが、hoge1,hoge2が青くならない。。なぜ？ $("div:first-child").css("color","blue"); //divで括ったspan要素に適用すると「ほげ１」緑になるが、「ほげ２」は緑にならない。 $("span:first-child").css("color","green"); }) </script> </head> <body> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> <div>hoge1</div> <span>fuga1</span> <div>hoge2</div> <div>hoge3</div> <div> <span>ほげ１</span> <span>ほげ２</span> <a>ふが１</a> <span>ほげ３</span> </div> </body> </html>
これだとhoge1の文字が青くならない。（spanの方の「ほげ１」は緑色になる。）
「div:first-child」は、「divを選べ。但し、そのdivはノードの中の先頭要素になっていなければダメよ」という解釈でいいんかな。
そうするとhoge1をbodyの子要素として先頭に持ってくると適用されるはず！
<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() { $("li:first-child").css("color","red"); $("div:first-child").css("color","blue"); $("span:first-child").css("color","green"); }) </script> </head> <body> <!-- body要素の子要素として先頭要素になるように、ここに持ってきた！ --> <div>hoge1</div> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> <span>fuga1</span> <div>hoge2</div> <div>hoge3</div> <div> <a>ふが１</a> <span>ほげ１</span> <span>ほげ２</span> <span>ほげ３</span> </div> </body> </html>
お〜、適用された！この解釈であってるっぽいぞ！
セレクターその１０（間接セレクター[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() { $("#second ~ li").css("color","red"); $(".class0 ~ div").css("color","blue"); }) </script> </head> <body> <ul> <li id="first">テキストテキストテキストテキストテキスト</li> <li id="second">テキストテキストテキストテキストテキスト</li> <li id="third">テキストテキストテキストテキストテキスト</li> <li id="fourth">テキストテキストテキストテキストテキスト</li> </ul> <div> <div>hoge0</div> <span class="class0">hoge1</span><br /> <span>hoge2</span> <div>hoge3</div> <div>hoge4</div> <div>hoge5</div> </div> </body> </html>
やっぱり自分と同じレベルのノードの要素をグループとして、その前か後ろかという判断をしてるのかねぇ。
でもここらへんのセレクターは正直あんまり使わないんじゃないかなー。
わかんないけど。
セレクターその１１（否定擬似クラス[CSS3]）
セレクター内で特定の条件「以外」のものを指定できる。
セレクターの後ろに :not(...) を付け、除外する条件を (...) 内に記述すると。
サンプルだとnotの括弧中には擬似クラスである:first-childが指定されているけど、ようするにセレクターフォーマットの識別子を記述できる感じなんだろうか。
例によってサンプル＋自前タグで実験。
<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() { $("li:not(:first-child)").css("color","red"); $("div span:not(.class0)").css("color","blue"); }) </script> </head> <body> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> <div> <div>hoge0</div> <span class="class0">hoge1</span><br /> <span>hoge2</span> <div>hoge3</div> <div>hoge4</div> <div>hoge5</div> </div> </body> </html>
おお！ちゃんとhoge2が青くなった！
セレクターその１２（empty擬似クラス[CSS3]）
子要素やテキストを含まない要素を指定できる。
セレクターの後ろに :empty と記述する。
あ〜、これはテーブルでやってみたいなぁ。自前タグをテーブルでやってみよう。
<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() { $("li:not(:first-child)").css("color","red"); $("td:empty").css("background-color","blue"); }) </script> </head> <body> <ul> <li>テキストテキストテキストテキストテキスト</li> <li></li> <li>テキストテキストテキストテキストテキスト</li> <li></li> </ul> <table border="1"> <tr> <td>あ</td> <td>い</td> <td>う</td> </tr> <tr> <td>え</td> <td></td> <td>か</td> </tr> <tr> <td>き</td> <td>く</td> <td>け</td> </tr> </table> </body> </html>
おお！抜けたとこの背景色がちゃんと青になった！
これは使う場面があるかも。
セレクターその１３（nth-child擬似クラス[CSS3]）
こ、これは・・・！！
テーブル行の背景色を交互に変更したい場合なんかにものすげー役に立つぞ！
特定のセレクターから指定した番号の要素だけを指定できる。
セレクターの後ろに :nth-child(番号) と記述する。
チーと長いが、後でみて参考にするためにも。。
<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() { $("li:nth-child(3)").css("color","red"); $("#table0 tr:nth-child(even)").css("background-color","pink"); $("#table1 tr:nth-child(odd)").css("background-color","lightgreen"); $("#table2 tr:nth-child(3n)").css("background-color","lightblue"); }) </script> </head> <body> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> <table> <tr> <td> <span>偶数行の背景色をピンクに</span> <table id="table0" border="1"> <tr><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td></tr> <tr><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td></tr> <tr><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td></tr> <tr><td>た</td><td>ち</td><td>つ</td><td>て</td><td>と</td></tr> <tr><td>な</td><td>に</td><td>ぬ</td><td>ね</td><td>の</td></tr> </table> </td> <td rowspan="2"> <span>３行飛ばしで背景色を薄い青に</span> <table id="table2" border="1"> <tr><td>ア</td><td>イ</td><td>ウ</td><td>エ</td><td>オ</td></tr> <tr><td>カ</td><td>キ</td><td>ク</td><td>ケ</td><td>コ</td></tr> <tr><td>サ</td><td>シ</td><td>ス</td><td>セ</td><td>ソ</td></tr> <tr><td>タ</td><td>チ</td><td>ツ</td><td>テ</td><td>ト</td></tr> <tr><td>ナ</td><td>ニ</td><td>ヌ</td><td>ネ</td><td>ノ</td></tr> <tr><td>ハ</td><td>ヒ</td><td>フ</td><td>ヘ</td><td>ホ</td></tr> <tr><td>マ</td><td>ミ</td><td>ム</td><td>メ</td><td>モ</td></tr> <tr><td>ヤ</td><td>ヰ</td><td>ユ</td><td>ヱ</td><td>ヨ</td></tr> <tr><td>ラ</td><td>リ</td><td>ル</td><td>レ</td><td>ロ</td></tr> <tr><td>ワ</td><td>ヲ</td><td>ン</td><td></td><td></td></tr> </table> </td> </tr> <tr> <td> <span>奇数行を背景色を薄い緑に</span> <table id="table1" border="1"> <tr><td>は</td><td>ひ</td><td>ふ</td><td>へ</td><td>ほ</td></tr> <tr><td>ま</td><td>み</td><td>む</td><td>め</td><td>も</td></tr> <tr><td>や</td><td>ゐ</td><td>ゆ</td><td>ゑ</td><td>よ</td></tr> <tr><td>ら</td><td>り</td><td>る</td><td>れ</td><td>ろ</td></tr> <tr><td>わ</td><td>を</td><td>ん</td><td></td><td></td></tr> </table> </td> </tr> </table> </body> </html>
いいねいいね〜。
セレクターその１４（last-child擬似クラス[CSS3]）
これも〜、最後の合計金額を出す為のフッターとかで背景色を指定したいときとか使えるか。
そんなこと行ったらfirst-childもヘッダーのバックカラー指定できるな。
<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() { $("li:last-child").css("color","red"); $("#table0").css("width","500px"); $("#table0 tr:last-child").css("background-color","pink"); $("#table0 tr:first-child").css("text-align","center"); $(".num").css("text-align","right"); }) </script> </head> <body> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> <table id="table0" border="1"> <tr><td>項目</td><td>単価</td><td>個数</td><td>小計</td> <tr> <td>商品１</td> <td class="num">100</td> <td class="num">2</td> <td class="num">200</td> </tr> <tr> <td>商品２</td> <td class="num">500</td> <td class="num">5</td> <td class="num">2500</td> </tr> <tr> <td>商品３</td> <td class="num">1000</td> <td class="num">3</td> <td class="num">3000</td> </tr> <tr> <td colspan="3">合計</td> <td class="num">5700</td> </tr> </table> </body> </html>
こーやって使うのねぇ。
セレクターその１５（only-child擬似クラス[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() { //一行目のspanだけ色が赤になる。 $("li span:only-child").css("color","red"); }) </script> </head> <body> <ul> <li><span>テキスト</span>テキストテキストテキストテキスト</li> <li><span>テキスト</span>テキスト<span>テキスト</span>テキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
一行目の最初の「テキスト」だけが赤になると。
セレクターその１６（CSSの属性セレクター[attribute] [CSS3]）
[attribute]で指定したattribute属性を持っている要素が抽出される感じ。
<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() { //id属性を持つタグだけ色が赤になる。 $("[id]").css("color","red"); }) </script> </head> <body> <ul> <li id="first">テキストテキストテキストテキストテキスト</li> <li class="second">テキストテキストテキストテキストテキスト</li> <li id="third">テキストテキストテキストテキストテキスト</li> <li class="fourth">テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
で、１行目と３行目の文字色が赤になる感じ。
セレクターその１７（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"以外のものが全て背景色が薄い緑になった。
セレクターその１８（CSSの属性セレクター[attribute^='value'],[attribute$='value'],[attribute*='value'],[attributeFilter1][attributeFilter2](複合タイプ) [CSS3]）
属性値を文字列とみなして、「^」は先頭、「$」は末尾、「*」は含むかどうか、複合タイプは全ての条件をandで、
それぞれ判定する。
んで、合致する場合のみ抽出する。
<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() { //先頭が'f'で始まるものの文字色を赤く。 $("[title^='f']").css("color","red"); //末尾が'd'で終わるものの背景色を薄い青に。 $("[title$='d']").css("background-color","lightblue"); //途中に'ir'を含むものにアンダーラインを表示。 $("[title*='ir']").css("text-decoration","underline"); //先頭が'f'で始まり、末尾が'th'で終わるものの文字を強調する。 $("[title^='f'][title*='th']").css("font-weight","700"); }) </script> </head> <body> <ul id="ul0"> <li title="first">テキストテキストテキストテキストテキスト</li> <li title="second">テキストテキストテキストテキストテキスト</li> <li title="third">テキストテキストテキストテキストテキスト</li> <li title="fourth">テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
文字列としての比較条件をまとめてしまったが、多分この方がわかりやすかろう。
後で見たときに。
