個別記事

前後の記事

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

この記事が属するカテゴリー
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 問用意されていたりして、一瞬「えーと…」って考え込んじゃったりして。

2005-07-23T16:31:22+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/273

"視覚的に分かりやすい CSS セレクタの手引き"へのトラックバックはまだありません。

コメント

"視覚的に分かりやすい CSS セレクタの手引き"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)