セレクタの構文(Selector syntax)

セレクタ(selector)は,結合子で分けられた1つ以上の単純セレクタから構成されます。

単純(simple)セレクタとはユニバーサルセレクタまたはタイプセレクタのことを指し,その直後にゼロ個以上の属性セレクタクラスセレクタIDセレクタ疑似クラスが任意の順序で続きます。

これらすべての構成条件がある要素の状況と一致したとき,単純セレクタは(その要素と)マッチしていると言います。

結合子(combinators)には,空白類文字子孫セレクタで用いる),閉じ不等号「>」(子供セレクタで用いる),プラス記号「+」(隣接セレクタで用いる)があり,結合子と単純セレクタの間には自由に空白類文字を挿入することができます。

文書内で,あるセレクタとマッチしている要素の集合を,そのセレクタの主体(subjects)と呼びます。

1つの単純セレクタから成るセレクタは,その条件に当てはまるすべての要素にマッチします。

別の単純セレクタや結合子を付け加えてマッチングの必要条件を増やしたとしても,そのセレクタの主体は常にセレクタ最後尾の単純セレクタにマッチする要素集合の部分集合になります。

疑似要素はセレクタの主体にのみ取り付けることができます。

グループ化Grouping

複数のセレクタに対して同じ宣言を共有する場合,それらのセレクタはコンマで区切ってグループ化することができます。

次例では,同じ宣言を持つ3つの規則を,1つの規則にまとめています。

次の3つの規則集合はそれぞれセレクタは異なりますが,等価の宣言を持っています:

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

これら3つの規則集合は,次のようにグループ化することで1つにまとめることができます:

h1, h2, h3 { font-family: sans-serif }

CSS では同様な簡略化の仕組みとして,他にも宣言の並列や簡略化プロパティなども提供されています。