セレクタ【selector】セレクター

概要

セレクタ（selector）とは、切替器、選択者、選考委員、選別機などの意味を持つ英単語。「選択(select)を行うもの」という意味で、IT分野ではケーブルや接続端子の切り替え装置や、ソフトウェア上で操作対象を選択・指定する記法などを指すことが多い。

CSSセレクタ

Webページの見栄え（スタイル）を記述するCSS（Cascading Style Sheet）では、ページ内でスタイルを適用する要素を指定するための記述をセレクタという。

CSSによるスタイル指定の基本的な構文は「セレクタ {スタイル}」という記述で、セレクタによってページ中の要素（一つまたは複数）を特定し、その要素（群）に対して指定されたスタイルを適用する。

セレクタの指定方法はいくつかある。全称セレクタ「*」はすべての要素を選択し、要素型セレクタ「要素名」は指定のHTML要素をすべて選択し、クラスセレクタ「.クラス名」は指定のclass属性を持つ要素を選択し、IDセレクタ「#ID」は指定のid属性を持つ要素を選択し、属性セレクタ「[属性名=値]」は指定の属性が条件に一致する要素を選択する。

セレクタはカンマで区切って複数指定でき、いずれかに一致する要素をすべて選択する。また、複数のセレクタを結合子で連結し、子孫ノードや兄弟ノードを指定することもできる。例えば、「div a」という指定は「div要素の中にあるa要素」という意味になる。

また、「:状態」という記述を付け加えることで、要素の特定の状態のみを指し示すことができる（擬似クラス）。例えば、「a:visited」はa要素のうち訪問済みリンクのみを指す。「::要素」という記述を付け加えると、擬似的に新たな要素を生み出すことができる（疑似要素）。例えば、「a::after」と指定するとa要素の直後に疑似要素を付け加え、表示する文字列やそのスタイルなどを指定することができる。