セレクタ ― classとidで狙う

導入

第1章では h1 { … } のように 要素名 で狙いました。前章で付けた class と id を使えば、もっと細かく対象を選べます。

説明

• .クラス名 … その class を持つ要素すべて（先頭にドット .）
• #id名 … その id を持つ1つの要素（先頭にシャープ #）

<p class="note">注意書き</p>
<p id="title">タイトル</p>

<style>
  .note { color: red; }
  #title { font-size: 30px; }
</style>

要素名・.class・#id の3つの狙い方を、対象に応じて使い分けます。

やってみよう

上の例を打ち込み、.note の段落が赤く、#title の段落が大きくなることを確かめましょう。.note を別の段落にも付けると、そちらも赤くなります。

演習

class="big" を持つ要素の font-size を 24px にする CSS を書いてください。