視覚的に分かりやすい CSS セレクタの手引き

CSS2.1 で特定の要素を指定する場合には、下記のセレクタ等を使用して当該要素を選択出来る。

全称セレクタ
* {background: #fff;}
全ての要素
タイプセレクタ
p {background: #fff;}
全ての p 要素
子孫セレクタ
div p {background: #fff;}
div 要素の子要素(下位)のp 要素
子供セレクタ
div > p {background: #fff;}
div 要素の直接の子要素(直接下位)のp 要素
隣接セレクタ
p + p {background: #fff;}
同じ親要素を持つ p 要素に継続する p 要素(兄弟)
:first-child 疑似クラス
div p:first-child {background: #fff;}
div 要素内で一番最初に出現する p 要素

この中で子供セレクタ、隣接セレクタ、:first-child 疑似クラスは Win IE では未対応だったりするんだけれども、これらのセレクタを組み合わせることによって、ID や クラスを付与せずとも特定要素を指定することが出来る。拙記事「first-child疑似クラスと隣接セレクタ」でも使用例を紹介しているけど、これらの使用方法を分かりやすく説明しているサイトもある。

各セレクタによる指定と、それに対する結果が載っていて分かりやすい。各セレクタの使用方法を理解するには非常に良い感じ。一番最後には宿題が3 問用意されていたりして、一瞬「えーと…」って考え込んじゃったりして。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/123

Comments