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 問用意されていたりして、一瞬「えーと…」って考え込んじゃったりして。
Comments