HTML のほとんどの要素は，CLASS 属性を持っている。この属性は，文書中の要素に名前を付けて分類する役割を担う。

　この CLASS 属性の値を利用して，スタイルの適用を絞り込むことができる。これをクラスセレクタという。これによって，同じ要素の種類であっても，役割の異なる要素群に，それぞれ異なったスタイルを適用できるようになる。クラスセレクタは，文脈に応じて同じ要素の種類でも違ったデザインを施す場合に有効といえる。

　クラスセレクタは，適用させる要素名に，ピリオド「.」を続け，クラス名を書くという書式である。

要素名.クラス名

これは，子要素セレクタとは異なり，途中に空白を入れない。

　クラスセレクタの例をご覧いただこう。

P.note { font-size: smaller; }

　このルールセットのセレクタ P.note は，“CLASS 属性の値に note を含む P 要素”と一致する。

<P>　横川駅の「鉄道文化むら」では，場内をミニ SL 列車「あぷとくん」でめぐることができる。</P>
<P CLASS="note">　蒸気機関車が給水中のときは，ディーゼル機関車が牽引する。</P>

　クラスセレクタは，そのほかのセレクタの書き方と組み合わせて使うこともできる。

P.note EM { font-style: inherit; font-weight: bold; }
P Q.words { color: maroon; }

ひとつめのセレクタは “CLASS 属性の値に note を含む P 要素の，下位要素である EM 要素”，ふたつめのセレクタは“P 要素の下位要素である，CLASS 属性の値に words を含む Q 要素”と，それぞれ一致する。

　次の書式のセレクタでは，要素の種類に関わりなく，与えられた値が CLASS 属性に含まれる要素と一致する。

.クラス名

　たとえば，

.note { font-size: smaller; }

は，CLASS 属性に note を含めば，要素の種類を問わず一致し，フォントサイズがひとまわり小さくなる。

　クラスセレクタに対して，要素固有の名前である ID 属性の値をセレクタとしてスタイルの適用を絞り込むことができる。これを ID セレクタという。

　書式は，クラスセレクタの場合がピリオドだったのに対して，ID セレクタはハッシュ記号「#」を用いる。

要素名#ID

クラスセレクタと同様に，要素の種類を問わないときは，

#ID

をセレクタとする。

　ID セレクタは，ID 属性が指定した値の場合に一致するということ以外，クラスセレクタと同様に使うことができる。ただし，1つの文書で同じ ID 属性の値を持つ要素は 2 つ以上存在し得ないことに注意されたい。この点で，ID セレクタは，クラスセレクタよりもより特殊性の高い絞り込みを行うといえる。したがって，ID セレクタは文書中の特定の要素を“これ”と指定してスタイルを適用させる場合に有効である。

#yokokawa990418 { color: green; }

　このセレクタは，ID 属性の値が yokokawa990418 である要素を“ねらい打ち”する。

<P ID="yokokawa990402">「おぎのや」が oginoya.co.jp を取得したらしい。この片田舎にも，インターネットの波は確実に押し寄せている。</P>
<P ID="yokokawa990418">「峠の終着駅」となって 1年半，横川の春は列車に乗ってやってきた。その日は再び釜めし売りがホームに立つ風景がよみがえり，それが峠の終着駅の新たな出発を告げた。</P>
<P ID="yokokawa990425">あいにくの雨。散歩がてら「鉄道文化むら」の写真を撮りに行こうかと思ったが今日は断念。</P>

　ID セレクタも，下位要素セレクタ，子要素セレクタとの組み合わせ，さらにはクラスセレクタとの組み合わせが可能である。