CSSの基礎 No.2 セレクタ

2010/04/27

CSSの基礎を学んだ経緯

CSSの基礎を新人に会社で教えることになった。そこで、ちょっと勉強したのでその記録に。

スタイルシートを適用する方法(CSSの基礎 No.1 適用方法)を学び、適用の優先順位について学んだ。

しかし、各要素ごとに適用範囲を要素単位に指定できるようになるだけでは、同一要素に複数のデザインパターンを用意することができない。そこで要素ごとに複数のデザインパターンを用意し、この要素にはこのCSSのパターンを適用するといったHTMLとCSSを紐付けて指定するセレクタがある。

* {
    margin: 0;
    padding: 0;
    border: 0;
}

全ての要素に適用される。ブラウザのデフォルト設定をリセットするために利用されることが多い。

div { margin 0; }

特定の要素に適用される。この場合、div要素全てに適用する。

div.className { margin 0; }

class属性をつけた要素に適用される。class属性の値はファイル中で重複して記述することができ、複数の要素に適用できる。この場合、class属性の値がclassNameのdiv要素全てに適用する。

div.#idName { margin 0; }

id属性をつけた要素に適用される。id属性の値はファイル中で重複して記述することはできない。この場合、id属性の値がidNameのdiv要素に適用する。

div p { margin 0; }

要素間の木構造に依存した子孫となる要素に適用される。複数の要素に適用できる。この場合、div要素の子孫に当たるp要素に適用する。

div > p { margin 0; }

子孫セレクタの拡張による子要素だけの適用。

div * p { margin 0; }

子孫セレクタの拡張による孫要素だけの適用。孫以降にも適用される。

div + div.next { margin 0; }

隣接セレクタ(兄弟セレクタ)による適用。(同じ親要素を持ち、隣接する要素。まさしく兄弟。)

疑似クラス
「:first-child」、「:link」、「:visited」、「:hover」、「:active」、「:focus」、「:lang」と記述されるもの。

a:link#id { color:#FFFF00; }

a要素で使用する場合は記述順に考慮すること。
疑似要素
「:first-line」、「:first-letter」、「:before」、「:after」と記述されるもの。

詳細度の大きいセレクタほど優先順位は高くなります。

style属性で記述されたプロパティが一番優先で、次点はID指定した場合となる。
表示する要素はより具体的に詳細に記述したセレクタが適用されると考えれば問題ない。

CSSの検証

W3Cによる勧告

W3Cによる勧告の邦訳

2010/04/27