CSS セレクターメモ

nettusのCSSセレクタの良記事。しかしブラウザに左右されるんで難しい。

以下はあまり自分では使ってこなかったセレクタ指定方法のメモ。

例1
ul + p { color:red; }

ul直下のpだけに作用する。

<ul>

</ul>

<p>この文字は赤くなる。</p>

<p>この文字は赤くならない。</p>

これは意外と使わないけど説明文を追加したりする時など使えそう。

img要素直下だけ小さくとか。

例2

div#sample > ul { color:red; }

first-childに似てる。idがsampleのdivにあるul要素１つ目に作用する。

<div id=”sample”>
<ul>
<li>
<!– このulには作用しない –>
<ul>
<li>作用しない</li>
</ul>
<!– このulには作用しない –>
</li>
<li>テスト</li>
</ul>
</div>

一つ目だけに枠をつけたい時とか使えそうな気もする。レアパターンですけど。

とはいえ2つともIE9からはFirst-childが使えるので、さほど無理して使うこともないかなと思います。

また以下のようなセレクタで指定することが多い。

div#sample ul { color:red; }

div#sample ul li ul { color:black; }

最近、使いでがあったのは以下のセレクタ。

フォーム要素の一部を指定したい時など大変便利です。

input[type=”text”] { color:red; }

とはいえ、ブラウザのフォーカスをどうするかが問題です。

主にIEなのですが、IE9、WebKitなどのブラウザをメインと考えることで、それ以外のブラウザを振り分けして

かなり簡素化した表示にさせるにはもう少し時間が必要な気がします。