ClassとIDセレクターについて

CSSにおいて、HTMLセレクターは対応するHTMLタグが作るHTMLエレメントを制御する。HTMLセレクターはHTMLタグの分だけしかないが、セレクターを自分で定義することが可能である。方法は２つあって、それぞれClass, IDセレクターと呼ばれる。

• idセレクターはdivisionエレメントのスタイルを定義するものとして用いられる。divisionエレメントそれ自身は「空っぽ」だが、idセレクターでスタイルを定義することで１つのエレメントとして役に立つ。自分で定義したidセレクターでそれぞれのdivisionエレメントのスタイルを定義すれば、HTMLが用意したものだけでない、様々なエレメントを利用することが出来る。

• classセレクターはHTMLエレメントのスタイルを定義するのに用いられるが、重要な点はスタイルを制御する命令を一塊のクラスとして名付けることが出来るという点である。したがって例えば役割ごとにスタイルクラスを定義しておくということができる。

IDセレクターについての考え方

既に述べたようにidセレクターはdivisionエレメントとともに用いられる。これはbodyエレメントの中にある小さなbodyエレメントだと解釈しておくと良いかもしれない。HTMLドキュメントの中でbodyエレメントは全体の土台を提供するが、divisionエレメントも同じような役割を果たしているからだ。

Classセレクターについての考え方

例えばイントロの文章だけを特別なスタイルで表示したいということがある。この場合、paragraphエレメントのスタイルをparagraphセレクターを使って制御することができる。しかし、この場合、paragraphセレクターの影響はページ全体に及ぶので、イントロの文章以外のスタイルまでイントロ仕様になってしまう。こういう場合、classセレクターとしてintroductionを定義して、イントロの所だけこのintroductionセレクターでparagraphエレメントを制御すれば良い。