最近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にもマッチします。
改めて整理してみると結構多いですね。
子供セレクタと兄弟セレクタはかなり活用できそうですね。アイデア次第な気がしますが。。。。