“セレクタ”とは？｜CSSセレクタ－CSS辞書

＃

“セレクタ”とは？

“セレクタ(Selector)”は文書の要素がそれぞれに定義されている特定の条件を満たすかどうかを試す条件式で、スタイルを適用する要素を選択します。

それぞれの要素は以下の5つの特徴を持ち、セレクタはこれらをもとにスタイルを適用する要素を選択します。

要素の要素型
一般にタグ名として知られます。: 要素が属する名前空間
要素はどの言語の要素なのかを判別するための名前空間に属します。: 要素のID名
HTMLでは“id”属性で指定できます。: 要素が属するクラス名
HTMLでは“class”属性で指定できます。: 属性
属性名と属性値の組。

これらの特徴を持たない要素は通常どのセレクタによっても選択されず、明示的に定義された方法でしか選択できません。

要素名や属性で適用対象を選択するセレクタ以外にも、文書ツリーが表す文書の構造ではわからない状態や他の単純なセレクタで表現できない状態の要素を選択する擬似クラスや擬似要素もセレクタの一種です。

＃

スタイルの優先順位

要素は複数のセレクタによって選択され得るので要素に適用される複数のスタイル・ルールに同じプロパティによる宣言が含まれて競合する場合があります。

要素に適用される複数の競合する宣言は“カスケード(Cascading)”によって一つの宣言に絞り込まれますが、この過程で宣言が含まれるスタイル・ルールに付けられたセレクタの“詳細度(Specificity)”が参考にされます。

セレクタは以下の一覧で上にあるものほど詳細度が高いとされます。

＃

仕様書

定義されている仕様書



type
*
[attribute]
.class
#ID
,
_
>
+
~
\|\|

＃

複数のセレクタの組み合わせ

多くの場合、より詳しい条件で要素を選択するために複数のセレクタが組み合わせられて使用されます。

組み合わせられたセレクタの塊もほとんどの場合は単に“セレクタ”と呼ばれますが、区別する必要がある場面では次のように呼び分けられます。

“単純セレクタ(Simple selector)”
“複合セレクタ(Complex selector)”
“合成セレクタ(Compound selector)”
“セレクタ・リスト(Selector list)”

単純セレクタ

単独のタイプ・セレクタ、全称セレクタ、属性セレクタ、クラス・セレクタ、IDセレクタ、擬似クラスは“単純セレクタ(Simple selector)”と呼ばれます。

単純セレクタの例



* {


/* すべての要素に適用するスタイル


}





p {


/* “p”要素に適用するスタイル


}





#sample {


/* ID名が“sample”の要素に適用するスタイル


}

合成セレクタ

一つ以上の単純セレクタが組み合わせられたもので、結合子によって組み合わせたものでないものは“合成セレクタ(Compound selector)”と呼ばれます。合成セレクタにはタイプ・セレクタもしくは全称セレクタは一つしか含むことができず、含まれる場合は合成セレクタの中で一番最初に記述されなければなりません。要素が合成セレクタに含まれるすべての単純セレクタの条件を満たしている場合に合成セレクタはその要素を選択します。

合成セレクタの例



p:first-child {


/* 親要素の最初の子要素である“p”要素に適用するスタイル


}





p#sample {


/* ID名が“sample”の“p”要素に適用するスタイル


}





p:first-child#sample {


/* 親要素の最初の子要素であり、ID名が“sample”の“p”要素に適用するスタイル


}

複合セレクタ

結合子によって組み合わせられた一つ以上の合成セレクタは“複合セレクタ(Complex selector)”と呼ばれます。複合セレクタは結合子が表す関係性にある要素をそれぞれに対応する合成セレクタの条件を満たしているか確認していき、複合セレクタの中で一番最後の要素を選択します。

複合セレクタの例



p .sample {


/* “p”要素の子孫要素でクラス名が“sample”の要素に適用するスタイル


}





p#sample > .sample {


/* ID名が“sample”の“p”要素の子要素でクラス名が“sample”の要素に適用するスタイル


}





h1:first-child + p a {


/* 親要素の最初の子要素である“h1”要素の直後にある兄弟要素である“p”要素の子孫要素である“a”要素に適用するスタイル


}

＃

結合子

“結合子(Combinators)”によってセレクタを組み合わせることで親子関係や兄弟関係によって要素を選択することができます。

結合子	説明
_	子孫要素の選択
>	子要素の選択
+	隣接する兄弟要素の選択
~	後続する兄弟要素の選択
\|\|	同列要素の選択

＃

セレクタ・リスト

コンマ(U+002C、“,”)で区切られた複数の複合セレクタは“セレクタ・リスト(“<selector-list>”、Selector list)”となります。

セレクタ・リストはコンマで隔てられた複合セレクタのうち少なくとも一つの複合セレクタの条件を満たす要素を選択します。

同じ内容の宣言ブロックを持つスタイル・ルールを複数の要素に適用したい場合にはセレクタをセレクタ・リストとすることでスタイル・ルールを一つにまとめることができます。

セレクタ・リストの例



h1:first-of-kind,

p#sample,

.sample span {


/*

・親要素の中で最初の“h1”要素

・ID名が“sample”の“p”要素

・クラス名が“sample”の要素の子孫要素である“span”要素

のいずれにも適用するスタイル

*/


}

“セレクタ”とは？

CSSのセレクタ