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セレクタ

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




関連

CSS





スポンサード リンク