クラスによる選択

HTML+CSS2の環境で、多様な体裁を構造的に書き分けるにはクラス を利用する。クラスには明示的に指定するものと、文脈や要素の組み合わせ方などにより自動的に決まるものがある。

クラス選択子

全ての要素には class 属性を持たせられる。属性値には任意の名前を割り当ててスタイル情報を割り当てることが期待されている。たとえば、

<p class="passion">感情的な表現…</p>

と passion から想起するスタイルを定義しておいて

うらみまーす♪
ずーとずーっと溜めている、ガソリン給油のポイント。 20リットル以上で1ポイント。たまに19リットルくらいでも負けてくれることが多いのに、この前は19.8リットルでスタンプ押してくれなかった! えーん。

のように見せたりするだとかの利用ができる。

要素 Xの class 属性値に foo という単語が含まれている場合にマッチするスタイル定義は、

X[class~="foo"] { ～～定義本体～～ }

となる。これにより、HTML側で

<X class="foo"> .... <X>

または

<X class="hoge foo bar"> .... <X>

とした場合に上記の「定義本体」で指定した特性値設定が利用される。

この選択規則はよく用いられるので

X[class~="foo"] { }

は、

X.foo { }

と簡略的に表記できる。

また、特定の要素だけでなく、同じクラス名の要素どれでもそのクラスを利用できるものを定義するときは要素名を * とするか、要素名自体を省略できる。たとえば、クラス foo を全ての要素に対して定義するなら

*.foo { ... }

または、

.foo { ... }

とする。

ID選択子

全ての要素には id 属性を持たせられる。属性値には文書中で唯一に定まる該当要素固有の名前を割り当てることが期待されている。これを利用して、特定の要素のみに適用するクラスを定義できる。たとえば、 HTML文書中で

<p id="preface">この文書は…ほげほげ</p>

というidをもつ要素(この場合パラグラフ)のみに適用させるスタイルは、

p#preface { ... }

とする。クラス定義など他のマッチング規則から、特定の要素を除外する場合に利用できる。

擬似クラス

特定の条件を満たす要素、あるいはその内容物の一部だけに適用されるスタイルを定義するのが擬似クラスである。

:first-child擬似クラス
該当要素が親要素の第1の子であるときにマッチする。たとえば、table要素の第1行と第1列のみに適用させたいスタイルなどに利用できる。たとえば、
```
tr:first-child {background: #8cc;}
th:first-child {background: transparent;}
td {text-align: right;}
td:first-child {
  background: #a8a; width: 4em; text-align: center;
}
```
と定義した表は以下のようにレンダリングされる。

各支店の売り上げ
秋田支店酒田支店富士支店

4月 2,236 1,894 3,776

5月 9,986 8,765 4,321

6月 1,234 555 8,848
:link, :visited 擬似クラス
リンク先を示すアンカーのうち、訪れていないリンク(:link)、既に訪れたリンク(:visited)にマッチする。HTML4では href 属性を持つ a 要素に適用される。したがって通常は a:link, a:visited を指定する。デフォルトのスタイルはユーザエージェントによって定義されていて、たとえば青系統の色が定義されているが、背景を青に近い色にする場合は読みづらい。明示的に指定することで回避できる。

各支店の売り上げ
	秋田支店	酒田支店	富士支店
4月	2,236	1,894	3,776
5月	9,986	8,765	4,321
6月	1,234	555	8,848

:active, :hover, :focus 擬似クラス

それぞれ、ポインティングデバイス(マウス等)で選択したとき、その上を通過したとき、入力フォームにフォーカスが当たったときにマッチする。

擬似クラス	定義	例
:active	a:active { color: white; background: #009; }	クリック中のみ青地に白
:hover	a:hover { color: white; background: green; }	通過すると緑地に白
:focus	input:focus { background: #ff6; }	フォーカスすると淡黄地お名前は?

:link, :visited でcolor特性を指定すると、 :link:hover, :visited:hover にも自動的にその色が継承される。このため、 a:hover のcolor特性値を定義したあとで a:linkやa:visitedのcolor特性値を設定するとそれによって a:hover のcolor特性値が上書きされる。別々の色を指定したい場合は

a:hover {color: yellow}
a:link {color: #00f}
a:visited {color: #44a}

としても、最初の定義は上書きされてしまうので、

a:link {color: #00f}
a:visited {color: #44a}
a:hover {color: yellow}

と書く必要がある。

yuuji@koeki-u.ac.jp