CSSセレクタの使い方。

最近ie6をサポートしない、もしくは別スタイルシートで対応するというサイトが増えてきました。

というわけで、ie7から使えるセレクタのおさらい。

E F
子孫セレクタ。
いつものです。
E > F
子供セレクタ。自分の直接の子要素にマッチ。孫にはマッチしません。

的な使い方でしょうか。body直下のheader要素をそれ以外を区別できるのはとても使えます。
E + F
兄弟セレクタ。または隣接セレクタ。Eのすぐ下にある要素Fにマッチします。

のような使い方をしてます。
あとは

のような選択もできます。兄弟セレクタを重ねて使えるというのは案外盲点な気がします。え、気づいてなかったのは自分だけ??
E[att]
属性attを持つすべての要素Eにマッチ
E[att=”val”]
属性attの値がvalに等しい要素Eにマッチ

という風に使えます。

には

はマッチしますが

はマッチしません。
E[att=~”val”]
属性attの値にvalを含む要素Eにマッチします。E[class=~”val”]=E.val
E[att=|”val”]
値がvalで始まる、ハイフン”-“で区切られた要素にマッチします。

は、en-USにもマッチします。

改めて整理してみると結構多いですね。
子供セレクタと兄弟セレクタはかなり活用できそうですね。アイデア次第な気がしますが。。。。