CSSの基礎 No.2 セレクタ

2010/04/27

CSSの基礎を学んだ経緯

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

スタイルシートを適用する方法(CSSの基礎 No.1 適用方法)

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要素全てに適用する。

IDセレクタ

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」と記述されるもの。

優先順位の計算方法

詳細度の大きいセレクタほど優先順位は高くなります。
  1. style属性で記述されたプロパティ 1000ポイント
  2. セレクタ中のID属性の数 * 100ポイント
  3. セレクタ中のクラスセレクタ、セレクタ中のID属性以外の属性と疑似クラスの数 * 10ポイント
  4. セレクタ中の要素名の数 * 1ポイント

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

CSS検証とW3Cによる勧告

CSSの検証

W3Cによる勧告

W3Cによる勧告の邦訳
2010/04/27
ページのトップへ戻る