セレクタの種類を整理しよう

CSSの基本であるセレクタって?


CSSのセレクタとは、そのスタイルを用いる範囲・対称を指定するためのものです。例えば、同じPタグで記述された文章でも、それぞれにセレクタを指定することで、全く別のスタイルを適用することが可能になります。一番有名なセレクタは、classセレクタとidセレクタでしょう。どちらも指定方法は似ていて、先のPタグを例にとると、<p class="クラス名">と<p id="id名">といった形での指定を行います。しかし、idセレクタの場合、同一の文章(一つのHTML)の中で一度しか指定することが許されません。一方、classセレクタはいくら重複しても問題ないという違いがあります。つまり、一度しか出現しないタイトルにidセレクタ、その後の各段落ではclassセレクタを用いる、という形になります。
なお、CSSもバージョンアップを繰り返しているため、それぞれのバージョンやブラウザによって、利用できる、あるいは読み込めるセレクタに違いがあります。どんな環境でも等しくデザインを実現したい場合、そういったセレクタのみを利用するように心がけましょう。


image

セレクタによってより複雑な表現も可能になる


CSS3からはセレクタの書き方が変化し、更に要素が追加されたことにより、様々なデザインの実現が可能となりました。例えば、複数ある要素のうち「最初の要素」「最後の要素」「n番目の要素」といった詳細が指定できるのです。ただ、古いブラウザ環境などではうまく読み込めないこともあるので、十分考慮が必要です。
なお、デザイン面に有用というのは、セレクタを用いることで一つの要素で複数のスタイルを表現することが可能だからです。例えば、CSS2のbeforeセレクタを用いることで、CSSのみで吹き出しを表現したり、ワンポイントの画像を用いたような見出しを実現したりできます。一方、使い慣れないうちはCSSの内容が複雑になるため、敬遠しがちではありますが、使いこなすことができれば表現の幅が大変に広がります。