CSSセレクタの使い方。

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

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

E F
子孫セレクタ。
いつものです。
E > F
子供セレクタ。自分の直接の子要素にマッチ。孫にはマッチしません。
[css]
body > header {}
article > header {}
[/css]
的な使い方でしょうか。body直下のheader要素をそれ以外を区別できるのはとても使えます。
E + F
兄弟セレクタ。または隣接セレクタ。Eのすぐ下にある要素Fにマッチします。
[css]
p + p {
margin-top: 10px;
}
[/css]
のような使い方をしてます。
あとは
[css]
div.box:first-child + div.box + div.box {}
[/css]
のような選択もできます。兄弟セレクタを重ねて使えるというのは案外盲点な気がします。え、気づいてなかったのは自分だけ??
E[att]
属性attを持つすべての要素Eにマッチ
E[att=”val”]
属性attの値がvalに等しい要素Eにマッチ
[css]
a[target="_blank"] { color :#00F; }
[/css]
という風に使えます。
[css]
p[class="red"] { color :#F00; }
[/css]
には
[html]
<p class="red"></p>
[/html]
はマッチしますが
[html]
<p class="red big"></p>
[/html]
はマッチしません。
E[att=~”val”]
属性attの値にvalを含む要素Eにマッチします。E[class=~”val”]=E.val
E[att=|”val”]
値がvalで始まる、ハイフン”-“で区切られた要素にマッチします。
[css]
a[lang=|"en"]
[/css]
は、en-USにもマッチします。

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