Cascading Style Sheets

2-1. 詳細なスタイル指定

前章の「実際にどうやって書く？」で多少触れた「グループ化」もその１つですが、 更に特定の要素だけにスタイルを指定したりすることも可能です。 その方法に、「クラスセレクタ」「IDセレクタ」「文脈セレクタ」などがあります。 これらは、それぞれ以下のような特徴を持っており、状況に応じて使い分けます。

クラスセレクタ

HTMLのClass属性に指定した名前の要素に対してのみスタイルを適用します。 特定の要素のみにスタイル指定したいときに有効ですが、使いすぎはCSSの一般性を失うことになり、メンテナンスのし難さに繋がります。

IDセレクタ

HTMLのId属性に指定した名前の要素に対してのみスタイルを適用します。 特定の要素のみにスタイル指定したいときに有効で、クラスセレクタよりも更に強力です。（詳細は詳細度による） ここぞと言うときにだけ使うようにした方が良いです。

文脈セレクタ

ある要素内のある要素に対してのみ有効にしたとき、つまり文脈から判断してこの場合は、こういう表現にする、というときに用います。

以上の３つの方法で、「文脈セレクタ」でまず詳細を指定し、次にクラスセレクタ、最後の頼みにIDセレクタを用いるようにするのが、賢い方法です。 以上のような方法を組み合わせることで、詳細なスタイル指定が可能になります。 以下にその一例を示します。

P{     color : black }  /*通常のセレクタ：P要素のテキストカラーは黒*/
P.sp1{ color : blue }   /*クラスセレクタ：Class属性値が「sp1」の場合のみテキストカラーを青*/
P#sp2{ color : red }    /*IDセレクタ：Id属性値が「sp2」の場合のみテキストカラーを赤*/
P EM{  color : green }  /*文脈セレクタ：P要素内にあるEM要素のテキストカラーを緑*/

このようなスタイルを指定した場合、次のHTMLのテキストカラーはどうなるのでしょう。

<P>ここは黒</P>
<P Class="sp1">ここは青</P>
<P Id="sp2">ここは赤</P>
<P>ここは黒だけど<EM>ここは緑</EM></P>

ピンとくれば儲けたものです。これである程度はCSSを使えることでしょう。 わからない方は、自分でいろんなパターンを試してみて下さい。

2-2. アンカーのスタイルを変える

アンカーだけに特別に用意された「アンカー疑似クラス」というのもあり、 これはアンカーに対する特殊なスタイル指定が可能です。例えば、訪問済みのアンカーは何色にする、フォーカスを受けた（マウスがアンカーにのった）時にどうする、等です。

HTMLのBODY要素にもLink属性などが存在することを皆さんはご存じでしょう。 その替わりになるのがこのアンカー疑似クラスです。