cssにおいてセレクタは、非常に重要な考え方です。例えば、以下の命令文があったとします。
p { color:green }
これは、pタグで囲われたテキストに関しては、文字色を緑にする、という命令文ですね。セレクタとは、この例でいうと、pタグに該当する部分、つまり何に対して、{}内の命令文を適用するかの選択対象を、セレクタと呼びます。
body { color:#gray } という命令文なら、「body」がセレクタとなります。
この「セレクタ」に選べる対象は、大きく分けて3種類あります。「html要素」と「クラス名」と「ID名」です。
pやbodyなど、「htmlの要素」をセレクタにする方法です。例えば上記の例のように、pをセレクタに選んで命令を書くと、ページ内のpで囲われたテキストすべてが命令適用の対象となります。
html要素に割り当てた「クラス名」を、cssのセレクタに選ぶこともできます。例えばhtmlの中で、
<p class="test">あいうえお</p>
というように、pタグの中にtestという名前のクラスを割り当てたとします。そしてpタグの中でも、testというクラスが割り当てられたものにだけ命令を適用する場合、cssには
.test { color:green }
と書きます。html要素をセレクタにする場合と異なり、頭に「.」が付いているものが、クラスをセレクタにしたものです。こうすると以下のように、普通のpタグ部分には文字色は適用されず、testというクラス名を与えられたテキストだけ緑色になります。
クラス名にtestと付けたpタグ文章
クラス名を付けていないpタグ文章
クラスメイト同じように、html要素に割り当てられたID名をセレクタにすることも可能です。例えば、
<p id="test2">かきくけこ</p>
html内で、上記のようなIDをpタグに割り当てたとします。このテキストのみに命令を与える場合、cssには
#test2 { color:orange }
と書きましょう。クラス名の場合は頭に「.」でしたが、ID名をセレクタにする場合は、頭が「#」になります。ページに表示した時の結果は、以下のようになります。
ID名にtest2と付けたpタグ文章
ID名を付けていないpタグ文章
上記文章を読むと、クラスもIDも同じもののように見えます。実際、機能的にはほぼ同じなのですが、明確な違いが一つだけあります。
クラス名はページの中で何度でも使用できるのですが、ID名はページ中で一度しか使えない、という特徴があります。従って、ページ中に必ず一度しか使えない内容に関してはIDを。ページ中に何度も使用する可能性があるものは、クラス名を使用するようにしましょう。この、何度も使えるか、一度しか使えないのか、というのが、クラスとIDの違いです。