16.4.4 セレクタ(1) クラスとID

例で見たとおり，セレクタとしてHTMLの要素を用いることができます．しかし他にも要素の指定方法が色々あり，それらを利用するとCSSがより便利なものとなります．ここではセレクタの書き方をもっと詳しく説明します．

クラスによる指定

文章を書いていると，同じグループに属する単語が何度も登場することがよくあります．たとえば歴史に関する文章を書いているときは人名や地名が何度も登場します．他にも，学術に関する文章を書いていると論文の名前が何度も出てきます．こういう時，同じグループに属するものに一斉にスタイルを指定したいと思うのはもっともなことです．

一般にHTML文書中の要素に対して，class属性を用いて作者が意味を付けることができます．たとえば

という文章において，「フェラーリ」「マクラーレン・メルセデス」が車のメーカーであることをマークアップしたい場合は

とすると，constructorクラスに指定した要素が全て同じ意味を持つということになります．ここで，次のようにしてconstructorクラスの要素全てにスタイルを指定することができます．

この機能はとても強力です．たとえば本のタイトルを全て斜体にしたいという場合，本のタイトルに共通のクラス名(ここではbook_titleとする)とつけておけば

と1行書くだけで実現することができます．また，後から本のタイトルを下線付きに変更したくなったときも，この1行をいじるだけで実現することができます．スタイルをHTMLではなくCSSで指定する最も大きな利点の一つは，ここにあると言っても過言ではありません．

IDによる指定

既にハイパーリンクのところでid属性を使いましたが，id属性は他の要素に対しても使うことができます．class属性は同じ意味を持つ単語・段落などをグループ化する目的に使われるのに対し，id属性は要素を一意に識別するためのもので，一つの文書中でidが重複してはいけません．

idに対してスタイルを指定するには，次のようにします．

こうすると，

と書いたとき，文字の大きさが x-large で表される大きさになります．

要素名と組み合わせた指定

スタイル指定の際に，要素名とクラス名を組み合わせることができます．たとえば

.constructor{ font-style:italic; }
h1.constructor{ color:red; }

とすると，constructorクラスの要素は全てイタリック体になりますが，その中でもh1要素だけは赤く表示されます．一般にこのような指定をするには，セレクタを <要素名>.クラス名 という形にします．

複数のセレクタに対する指定

2個以上のセレクタに対して同じスタイルの指定をするときは，セレクタをカンマ区切りで並べることができます．たとえば

h1 { color:red; }
h2 { color:red; }

と一々書かなくても

h1,h2 { color:red; }

と書けば，h1,h2要素両方にスタイルを同時に設定できます．