CSS-セレクタ

CSS セレクタとは

CSS命令を適用するか選択（セレクト）する定義をセレクタといいます。

基本構造は以下の通りです。


セレクタ {
  プロパティ:値;
}

CSSの指定内容は「{ }」内に記述します。

プロパティと値をコロン「:」で区切って記述します。この内部定義は複数行記述することも可能です。

セレクタはカンマ「,」で区切って複数指定することもできます。

指定	説明
セレクタ	スタイルの適用対象となる要素を定義します。
プロパティ	レンダリング特性の種類（HTMLにおける属性）を定義します。
値	プロパティに指定可能な値（HTMLでいう属性値）を定義します。

セレクタにアスタリスク「*」を指定すると、文書内の全要素にそのスタイルが適用されます。

下記の例では、文書内にある全ての要素のマージンが0になります。


* {
  margin: 0;
  padding: 0;
}

セレクタに要素名を指定した場合、要素タイプ別にスタイルが適用されます。

下記のようにp要素に対してスタイルを設定しておくと、文書内の全p要素にスタイルが適用されます。


p { color: #FFFFFF; }

セレクタとセレクタを「半角スペース」で区切って記述すると、親セレクタの範囲内にある子セレクタ及び、以下に続く子孫セレクタにスタイルを適用します。

例えば下記の例では、p要素のstrong要素に対して「color: blue」が適用されます。


p strong { color: blue; }

セレクタとセレクタを「>」で区切って記述すると、親セレクタの「直下」にある子セレクタにのみ、スタイルを適用します。

孫セレクタに対してはスタイルを適用しません。


p > strong { color: blue; }

セレクタとセレクタを「+」で区切って記述すると、両方のセレクタが同じ親要素を持つ場合にスタイルを適用します。

ただし、当該セレクタの「直後」にあるセレクタにのみ、スタイルを適用させることができます。

下記例では、h1要素と同じ親要素（body要素）を持ち、かつh1要素の直後にあるp要素に対してのみ「color: blue」が適用されます。


h1 + p { color: blue; }

CSS-IDセレクタを参照下さい。