# CSSセレクタの使い方。

- リンク: https://torounit.com/blog/css%e3%82%bb%e3%83%ac%e3%82%af%e3%82%bf%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9%e3%80%82/
- 公開日: 2010-09-27T22:19:17+09:00
- 作成者: Toro\_Unit

最近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にもマッチします。

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