#11  class属性とid属性について理解しよう

左のHTMLのコードの中で2番目のp要素だけテキストを赤色にしたいとします。

その時のCSSのコードはどうなるでしょうか？

div{ 
  color : red; 
}

divをセレクタにした場合は子要素に影響してしまうので全てのpが赤色に変わってしまいます。

p{ 
  color : red; 
}

ではpをセレクタにするのが正解でしょうか？こちらも同様に全てのpが赤色に変わってしまうので不正解です。

そして.redをセレクタに指定することで「red」というclass名のついたp要素だけテキストを赤色にできるというわけです。

このように、「特定の要素だけ（例では2番目のp要素）に対してCSSを適用させたい」場合にclassやidで名前をつけセレクタとして扱います。

他の属性と同じようにid属性も

<タグ名 id="id名">と書きます。

名前の付け方にもルールがあり、

• 半角英数字を使う（大文字OK）
• -（ハイフン）と_（アンダーバー）の記号はOK
• 先頭が数字から始まるのはNG

となっています。

左に正しい例と間違っている例を紹介しています。

id名のルールに反していると上手くCSSが機能しないので注意しましょう。

id名をつけた要素をCSSのセレクタにする時は

#（半角シャープ記号）+ id名

というようにセレクタに記述します。

プロパティや値の書き方に影響はありません。

「1つのページに」とは「同じHTMLファイルに」という意味です。たとえばトップページを表示しているindex.htmlにid="red"というidが複数存在しているのはNGです。

しかし、トップページのindex.htmlにid="red"が1つ、サービス紹介のページを表示するservice.htmlにid="red"が1つと同じサイトでも違うページならOKです。

id属性と同じ形式です。

<タグ名 class="class名">

というように書きます。

名前の付け方のルールもid属性と同じで

• 半角英数字
• -（ハイフン）と_（アンダーバー）の記号はOK
• 先頭が数字から始まるのはNG

となっています。

CSSでclass名をセレクタに指定する場合は

.（ドット記号）+ class名

というように書きます。

こちらもプロパティや値の書き方に変化はありません。

class属性とid属性の大きな違いの1つがこれです。

idは同じページに同じid名の要素が複数存在するのはNGでしたよね。

class属性はその制限がありません。

かと言って複数ないとダメということはなく、class属性は1つでも複数でもどちらでもOKです。

1つの属性の中で半角スペースで区切ることで、複数のid名やclass名を付与することができます。

画像の例での<p>は

.bigというclass名の要素であり、さらに.largeというclass名の要素でもあるということになります。

つまり、次のように書いた場合どちらも同じ要素を指すことになります。

同じ要素にセレクタを複数つけられるメリットをつづけて解説します。

例えばどちらのpもほぼ同じ見た目にしたいけど、2つ目のpだけ変化を加えたいというケースがあります。

そんな場合は左のコードのように2つ目のpにのみ、追加でclass名を付与します。

.redは共通のclass名なのでpはどちらも同じ見た目になっていますが、追加で.borderがついた2つ目のpのみ線がついていますよね。

左のコードのpにはそれぞれ
class="redがついていますが、2つ目のpにはid="blue"もついています。

そしてCSSには.redは赤文字、#blueが青文字になるコードが書かれていますね。

それでは.redと#blueどちらもついている2つ目のpは「赤」と「青」どちらの文字色になるでしょうか？

正解は青色です。

idがセレクタの場合、classよも優先度が高く「id > class」となるため、color : blue;が優先して適用されています。

このようにidとclassではCSSのidの方が優先度が高いということを覚えておきましょう。

たとえば左のようにaのhref属性にhref="#top"と記載することでa要素をページ上でクリックした場合、id="top"と付いているdivの位置まで移動させることができます。

例えば複数の要素に対して、同じCSSを適用したい時にidで名前とつけていると不便になります。

id名は同じ名前を使えないので、別のid名をつけた上でCSSの同じコードを書かないといけません。

classなら同じclass名を使ってもOKでしたね。

なので、共通のCSSをつけたい要素に対して共通のclass名をつければ同じコードを書く必要はありません。

左のコードのように共通のclassセレクタを指定し、1度のコード記述で共通の見た目にすることができました。

<div class="firstview">
    <img src="bg.jpg">
    <h1>絶景冒険プラン</h1>
</div>
<div class="content">
    <h2 class="headline">
      <span>point</span>このプランのポイント
    </h2>
    <ul class="list">
        <li>雨天の場合、100%返金</li>
        <li>20年のベテランガイドが着くから安心</li>
        <li>野生動物と触れ合える！</li>
    </ul>
    <a class="button" href="./reserved">予約する</a>
</div>

<div>に対してfirstviewやcontentといったclass名がついていたり、ulやaにlistやbuttonというclass名がついていますよね。