id・class・子孫セレクタ

id/classは要素タイプから記述する

  • 原則として、id/classには要素タイプをつける
div.note {
   …
}
p.moveto {
   …
}
div#search {
   …
}
原則id、例外class
  • ページ内のテキストやパーツそれぞれは本来、特定の役割を備えているはず
  • 原則としてidを使い、他のものと役割が共通する場合や複数の役割を与えたい場合にだけ、例外的にclassを使うという発想が大切
  • idでは値は単一、classでは値は複数指定可（半角スペース区切り）ということを思い出そう
スタイルの特殊性（specificity）

  • スタイルの読み込み順序のルール（あとから読み込んだものを優先する）は、あくまで特殊性が同じスタイルに適用される

idセレクタ

  • ページ内で識別したい要素に対する「一意性」のもの
  • 同じページ内で同じIDを複数の要素に指定はできません
  • HTML文書内で１つ確定していくもの
  • とくにグループを囲む外枠に記述する「div要素」には「IDセレクタ」が使われます



サイトをレイアウトするためのdiv要素や、ページ上部１箇所のみに表示するグローバルナビなど、間違いなくページ内で１回しか出てこない部分を指定するようにしましょう。



　要素名#ID名 {　プロパティ：値；}
　#ID名 {　プロパティ：値；}


　h1#colorGreen {
　　　color: #00CC00;
　　}


　<h1 id="colorGreen">大見出し要素</h1>

classセレクタ

  • 同じ要素の中で特定の部分にだけスタイルを適用させたい場合に使います。
  • 「idセレクタ」と違って、同じページ内で複数の場所に指定ができます



　要素名.クラス名 {　プロパティ：値；}
　.クラス名 {　プロパティ：値；}


　h2.colorGreen {
　　　color: #00CC00;
　　}


　<h2 class="colorGreen">中見出し要素</h2>

子孫セレクタ

特定の要素の子要素または子孫要素にスタイルを適用させたい場合に使います。
要素名との間にスペースを挿入し区切って設定します。



　親要素　子要素 {　プロパティ：値；}


　p em {
　　　color: #FF6600;
　　}


　<p>段落要素内の<em>強調</em>を表す</p>

id/classより、子孫セレクタ
  • id/classはなるべく使わず、ワイヤーフレームの各部位のidを頼りに子孫セレクタを積極利用
  • 文書ツリー構造を意識したスタイル設計が可能
子孫セレクタはわかりやすく
div#sidebar a { ... }

div#sidebar ul li a { ... }


どちらでもOKです。
しかし、ツリー構造が一目でわかるのは下のほうです。

2014年現在
  • 初心者の理解としては上記のように子孫をすべて書き出すことが理解につながりますが、現在ではより少ない記述で適用させるようになっています
#sidebar a { ... }