セレクタ・プロパティ・値

p { color: red }
p セレクタ (スタイルを適用させる対象)
color プロパティ
red

スタイルの指定内容は { } 内に記述します。

上記の例では、文字色を設定する color プロパティに red を指定して、そのスタイルをp要素に適用させています。

  • セレクタの部分には、要素名の他にIDやクラス名などを使用することができます。

プロパティと値

スタイルの指定は、プロパティのセットで行われます。

color: red

上記のように、プロパティと値をコロン( : )で区切って記述します。(左がプロパティ、右が

また、1つのセレクタに対して複数のスタイルを設定することもできます。

h1 { padding: 3px; background-color: #f9f9f9; color: #ff0000 }

p {
margin: 0 0 1em;
color: #808080;
line-height: 140%;
}

複数のスタイルを設定する場合は、上記のように各スタイルをセミコロン( ; )で区切って記述します。(一番最後の( ; )は省略しても構いません)

複数のセレクタ

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

h1, h2, h3 { color: red }

上記の例では、h1h2h3、それぞれの要素に対して同じスタイル(color: red)を指定しています。

コメント

/**/ で囲まれた内容は、コメントとして扱われます。

/* この部分がコメント */

/*
この部分がコメント
*/

次のような感じで、作者の覚え書きとして使用すると便利です。

h1 { color: red } /* 見出しのスタイル */
p { line-height: 120% } /* 段落のスタイル */

セレクタの組み合わせ

Aセレクタ Bセレクタ (子孫セレクタ)

セレクタとセレクタを半角スペースで区切って記述すると、Aセレクタの範囲内にあるBセレクタにのみ、スタイルを適用させることができます。

p strong { color: red; }

[子孫セレクタのイメージ]

上記の例では、p要素内のstrong要素にのみ、color: red が適用されます。それ以外のstrong要素には、このスタイルは適用されません。

サンプル画面へ新規ウィンドウで表示


Aセレクタ > Bセレクタ (子供セレクタ)

セレクタとセレクタを > で区切って記述すると、Aセレクタ直下にあるBセレクタにのみ、スタイルを適用させることができます。

  • 直下とは位置的なではなく、階層的なのことです。(直接の子要素という意味)
p > strong { color: red; }

[子供セレクタのイメージ]

上記の例では、p要素の直下にあるstrong要素にのみ、color: red が適用されます。それ以外のstrong要素には、このスタイルは適用されません。

  • この指定方法は、IEではバージョン7から対応しています。(ただし、表示モード標準モードの場合に限ります)

サンプル画面へ新規ウィンドウで表示


Aセレクタ + Bセレクタ (隣接セレクタ)

セレクタとセレクタを + で区切って記述すると、両方のセレクタが同じ親要素を持ち、Aセレクタ直後にあるBセレクタにのみ、スタイルを適用させることができます。

h2 + p { color: red; }

[隣接セレクタのイメージ]

上記の例では、h2要素と同じ親要素(body要素)を持ち、かつh2要素の直後にあるp要素にのみ、color: red が適用されます。それ以外のp要素には、このスタイルは適用されません。

  • この指定方法は、IEではバージョン7から対応しています。(ただし、表示モード標準モードの場合に限ります)

サンプル画面へ新規ウィンドウで表示