HTML4.0から新たにClass属性が加わったが、CSSのセレクタからこのClass属性値を参照できます。 Class属性は殆ど全ての要素に適用できます。つまり、殆ど全ての要素に対しクラスセレクタを定義することが可能です。
クラスセレクタは、1つのセレクタに対して1つのみ定義することが可能です。複数持つことはできません。 (H1.heading.special などは不可)
クラスセレクタを用いることで、要素のみの定義に対してより詳細で緻密なスタイル指定が可能になります。 ただし、クラスセレクタに頼りすぎる設計では、CSSの汎用性を失ってしまうことになるので注意が必要です。 W3Cからも、この方法は推奨されていません。
クラスセレクタの他にIDセレクタもあります。
<HTML> <HEAD> <STYLE Type="text/css"> H1.heading { color : blue } /*H1要素のClass属性値がheadingのフォントカラーは青*/ </STYLE> </HEAD> <BODY> <H1 Class="heading">Headline is blue</H1> </BODY> </HTML>
クラスセレクタ同様、HTML4.0で導入されたId属性に対してもCSSセレクタから参照可能です。 Id属性は殆ど全ての要素に適用可能で、それら全てにIDセレクタを定義することが出来ます。
この方法はクラスセレクタよりも更に強力な方法で、HTMLの文法如何に関わらず、緻密なスタイル指定が可能で、 このIDセレクタに頼りすぎた設計ではCSSの汎用性を完全に失ってしまうことになるので注意が必要です。 W3Cからも、この方法は推奨されていません。
<HTML> <HEAD> <STYLE Type="text/css"> H1#id-a { color : blue } /*H1要素のId属性値がid-aのフォントカラーは青*/ </STYLE> </HEAD> <BODY> <H1 Id="id-a">Headline is blue</H1> </BODY> </HTML>
継承性は非常に便利な機能であるが、時には邪魔に感じるときがあります。 例えば下の例がそうで、こうすることでEM要素の部分はフォントカラーは赤になるが、これではHTML文書中の全てのEM要素に適用されてしまいます。 HTML著者がH1要素内(表題内)のEM要素のみに赤を指定したい場合非常に不便で、クラスセレクタやIDセレクタにより実現はできるものの、 それでは汎用性に欠けてしまいます(推奨もされていない)。
H1 { color : blue } /*H1要素のフォントカラーは青*/ EM { color : red } /*EM要素のフォントカラーは赤*/ <H1>表題の一部を<EM>赤</EM>です</H1>
こういうときに「文脈セレクタ」を用います。これはその名の通り、文脈に合ったCSSを適用しようというもので、下の例のように組合せにより実現します。 例ではH1要素に含まれる、EM要素のフォントカラーを赤に指定しています。こうすることで、HTML文書中の単純なEM要素には赤は適用されなくなります。 入れ子の関係を明確に指定することでそのパターンに合う要素のみに適用するもので、セレクタに指定する要素名と要素名の間にスペースを入れます。
H1 { color : blue } /*H1要素のフォントカラーは青*/ H1 EM { color : red } /*H1要素内のEM要素のフォントカラーは赤*/ <H1>表題の一部を<EM>赤</EM>です</H1>
文脈セレクタは、「クラスセレクタ」「IDセレクタ」「グループ化」も適用可能です。
DIV EM.aa { color : red } /*クラスセレクタ*/ DIV EM#bb { color : green } /*IDセレクタ*/ DIV EM,#bb EM { color : green } /*グループ化*/