HTML/CSS：セレクタの使い分け

クラス付きが赤、無しは黒

CSSでは .note と書き、HTMLでは class="note" と書く。

<style>
  .note {
    color: red;
  }
</style>

<p class="note">クラス付き</p>
<p>クラス無し</p>

CSSの . は「クラス」を意味する記号。HTML側には書かないので、混同しないよう注意する。

解答 == B

クラスはドット、IDは別の記号。

B

ID は #、クラスは .。ページ内リンク（HT03）でも # を使ったのと同じ記号。

#main が navy

CSSでは #main、HTMLでは id="main" と書く。

<style>
  #main {
    color: navy;
  }
</style>

<div id="main">メイン領域</div>

IDはページに1つだけ。同じIDを複数の要素に付けるのは誤りで、その場合はクラスを使う。

<style>
  ____box {
    color: red;
  }
</style>

<p class="box">テキスト</p>

クラス付きの要素が赤

クラスを表す記号1文字。

.

ドットを忘れると要素名として扱われる。box という名前のタグを探しに行くので、当然何も適用されない。

解答 == B

クラスと要素名では、どちらが強いか。

B

クラス（10）＞ 要素（1）なので赤が勝つ。後に書いたかどうかではなく、強さで決まる——これが詳細度の考え方。

p の色が青（IDが最強）

class と id の両方を持つ p を作る。

<style>
  p  { color: green; }
  .c { color: red; }
  #i { color: blue; }
</style>

<p class="c" id="i">何色になるか</p>

IDが勝って青になる。CSSの記述順に関係なく、詳細度が高いものが優先される。

<style>
  a____hover {
    color: red;
  }
</style>

<a href="#">リンク</a>

a:hover のルールが存在する

擬似クラスを表す記号1文字。

:

コロンで擬似クラスを指定する。:hover のほか :first-child や :focus などがある。

解答 == B

スペースは「子孫」を意味する。

B

スペースは階層を問わずすべての子孫。直下だけに限定したいなら > を使う。

div内のpだけ背景が黄色

div p { … } と書く（スペースで区切る）。

<style>
  div p {
    background-color: yellow;
  }
</style>

<div>
  <p>div の中</p>
</div>

<p>div の外</p>

div の外の段落は変わらない。範囲を限定できるので、ページの一部だけに適用したいときに使う。

1番目のliだけ赤

li:first-child { … } と書く。

<style>
  li:first-child {
    color: red;
  }
</style>

<ul>
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
</ul>

擬似クラスで「何番目か」を狙える。HTMLにクラスを追加しなくても、位置だけで指定できる。

2つのボタンの色が正しい

class="btn primary" のように、クラスは複数付けられる（スペース区切り）。

<style>
  .btn {
    color: white;
  }

  .primary {
    background-color: navy;
  }

  .danger {
    background-color: red;
  }
</style>

<button class="btn primary">保存する</button>
<button class="btn danger">削除する</button>

共通部分と個別部分をクラスで分けるのが実務の定石。btn に共通スタイル、primary や danger で色だけ変える——新しい色を足すのも簡単になる。

直下のpだけ黄色、孫は透明

div > p は直下だけ。section の中の p には適用されない。

<style>
  div > p {
    background-color: yellow;
  }
</style>

<div>
  <p>直下の段落</p>

  <section>
    <p>孫の段落</p>
  </section>
</div>

孫の段落には背景が付かない。> は「直接の子」だけを狙う。スペースなら孫にも適用される。

nav内のaがnavy、外は既定色

nav a { … } と子孫セレクタで書く。

<style>
  nav a {
    color: navy;
  }
</style>

<nav>
  <a href="#">ホーム</a>
  <a href="#">会社概要</a>
</nav>

<p><a href="#">本文中のリンク</a></p>

場所によってスタイルを変えられる。メニューのリンクと本文中のリンクは役割が違うので、見た目も分けるのが自然。

tagのみがgray、両方持つのがred

.tag.new はスペースを空けずに続けて書く（両方のクラスを持つ要素）。

<style>
  .tag {
    color: gray;
  }

  .tag.new {
    color: red;
  }
</style>

<span class="tag new">新着</span>
<span class="tag">通常</span>

スペースを空けると「子孫」の意味になる。.tag .new（スペースあり）と .tag.new（スペースなし）はまったく違う指定になるので注意。

2番目のliだけ背景が灰色

li:nth-child(2) { … } と書く。

<style>
  li:nth-child(2) {
    background-color: #eeeeee;
  }
</style>

<ul>
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
</ul>

nth-child は「何番目か」を数値で指定できる。nth-child(even) と書けば偶数行すべてになり、表の縞模様が作れる。

すべてのセレクタが正しく適用される

.card.sale はスペースを空けずに書く。.card:first-child h3 は「最初のカードの中の h3」という意味。詳細度は .card.sale（20）が .card（10）より強い。

<style>
  #products {
    background-color: #f5f5f5;
  }

  .card {
    background-color: white;
  }

  .card h3 {
    color: navy;
  }

  .price {
    color: #333333;
  }

  .card.sale {
    background-color: #fff5f5;
  }

  .card:first-child h3 {
    color: red;
  }
</style>

<div id="products">
  <div class="card">
    <h3>ノートPC</h3>
    <p class="price">128,000円</p>
  </div>

  <div class="card">
    <h3>マウス</h3>
    <p class="price">3,200円</p>
  </div>

  <div class="card sale">
    <h3>キーボード</h3>
    <p class="price">8,500円</p>
  </div>
</div>

3枚目のカードが薄い赤になるのは、詳細度の勝負に勝ったからだ。.card はクラス1つで10点、.card.sale はクラス2つで20点——後に書いたから勝ったのではなく、強いから勝った。CSSの順序を入れ替えても結果は同じになる。

.card:first-child h3 も同様だ。.card h3（クラス1＋要素1＝11点）に対し、こちらは擬似クラスが加わって21点。だから1枚目だけ赤が勝つ。「なぜかCSSが効かない」という悩みの大半は、この詳細度の計算で説明がつく。

実務ではIDセレクタを多用しないのが定石になっている。ID は100点と強すぎるため、後から上書きしようとしてもクラスでは勝てず、!important に頼るしかなくなるからだ。基本はクラス、レイアウトの大枠だけID——このくらいの使い分けが扱いやすい。

次章では文字とフォントを扱う。行間や字間を調整し、読みやすい文章にするための技術を学んでいく。