実行できるCSSドキュメント: クラスセレクタ

Q: CSS でクラスを指定するには？

ドットの後にクラス名を書きます: .card { ... } は class="card" を持つすべての要素をスタイルします。ドットを付けるのは CSS だけで、HTML の属性にはドットを付けません。

Q: 1 つの要素に 2 つのクラスを付けるには？

1 つの属性の中で、名前をスペースで区切ります: class="btn primary"。1 つの要素に class を 2 回書いても効きません。ブラウザは最初の属性だけを残します。

Q: 2 つのクラスを両方持つ要素を選択するには？

クラスセレクタをスペースなしでつなげます: .btn.primary は両方のクラスを持つ要素に一致します。スペースを入れた .btn .primary は、.btn 要素の内側にある .primary 要素という意味になります。

Q: CSS のクラス名は数字で始められますか？

HTML では可能ですが、セレクタはエスケープしていない数字で始められないため、.1col は無効な CSS です。数字をエスケープする (.\31 col) こともできますが、クラス名は英字で始めるのがよいでしょう。

クラスセレクタ

クラスセレクタは、ドットの後にクラス名を書いたものです。要素の種類に関係なく、class 属性にその名前を含むすべての要素をスタイルします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

ドットが付くのは CSS の中だけです。HTML の属性はドットなしの class="badge" です。クラス名は大文字と小文字を区別します。.Badge は class="badge" に一致しません。

1 つの要素に複数のクラス

要素にはスペースで区切っていくつでもクラスを付けられます。それぞれのクラスが自分のルールを持ち込むので、小さな部品を組み合わせてバリエーションを作れます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

スペースなしの .btn.danger は、両方のクラスを持つ要素に一致します。最後の span は danger を持っていますが btn がないため、連結したルールは適用されません。

クラスセレクタのバリエーション

セレクタ	一致するもの
`.note`	クラス `note` を持つすべての要素
`p.note`	クラス `note` を持つ `<p>` 要素だけ
`.btn.primary`	`btn` と `primary` の両方を持つ要素
`.card .title`	`.card` の内側のどこかにある `.title`
`.card > .title`	親が `.card` である `.title`
`.a, .b`	`a` または `b` を持つ要素

スペースのありなしの違いは、ほかの結合子と合わせて CSS セレクタのページで解説しています。

ID セレクタ

ID セレクタは、ハッシュの後に id を書いたものです。#site-header は id="site-header" を持つ要素をスタイルします。id はページ内で一意でなければならないので、ID セレクタが対象にするのはちょうど 1 つの要素です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

id はスタイル以外にも使われます。href="#details" はその要素までスクロールし、<label for="email"> は input の id を指し、JavaScript は document.getElementById('details') で要素を見つけます。要素に id を付けるのはふつうこのためで、スタイルにはクラスのほうが適しています。

class と ID の比較

	クラス `.name`	ID `#name`
1 ページあたり	複数の要素	1 つの要素
1 要素あたり	複数 (スペース区切り)	1 つ
詳細度	(0,1,0)	(1,0,0)
リンク先 (URL の `#name`)	不可	可能
向いている用途	スタイル	アンカー、ラベル、JavaScript のフック

スタイルにクラスを使う実際的な理由は、この詳細度の差です。ID が 1 つあれば、クラスがいくつあっても勝ちます。そのため ID で書いたルールは、別の ID、インラインスタイル、!important でしか上書きできません:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

JavaScript でクラスを追加・削除する

JavaScript で見た目を変えるときは、クラスを使うのが普通です。CSS が状態を定義し、スクリプトはそれを切り替えるだけです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList には add、remove、contains、replace もあります。className に直接代入するのは避けましょう。要素が持っていたすべてのクラスが置き換えられます。

クラスの命名

英字、数字、ハイフン、アンダースコアなら安全です: card、card-title、card__title、is-open。
セレクタを数字や、ハイフンと数字で始めないでください。.2col は無効な CSS です。英字で始める (.cols-2) か、数字をエスケープします (.\32 col)。
見た目ではなく目的で名前を付けます。.error はデザインを変えても使えますが、.red-text は使えません。
大きなプロジェクトでは命名規則が役立ちます。BEM では block__element--modifier と書きます。例: .card__title--large。

よくある間違い

HTML にドットを付ける。 class=".badge" は .badge に一致しません。
class 属性を 2 つ書く。 <p class="a" class="b"> では a だけが残ります。class="a b" と書きましょう。
両方のクラスのつもりでスペースを入れる。 .btn .primary は入れ子の要素を探します。同じ要素なら .btn.primary です。
id を使い回す。 CSS が動いているように見えても、重複した id は getElementById、アンカーリンク、ラベルの関連付けを壊します。
すべてを id でスタイルする。 詳細度が高いため、後から上書きするのが大変です。クラスを使いましょう。

よくある質問

CSS でクラスを指定するには？

ドットの後にクラス名を書きます: .card { ... } は class="card" を持つすべての要素をスタイルします。ドットを付けるのは CSS だけで、HTML の属性にはドットを付けません。

CSS の class と id の違いは何ですか？

class はいくつの要素にでも使え、1 つの要素に複数付けられます。id はページ内で一意でなければならず、1 つの要素に付けられるのは 1 つまでです。CSS では #id の詳細度が .class よりずっと高いため、ID のルールは上書きしにくくなります。

1 つの要素に 2 つのクラスを付けるには？

1 つの属性の中で、名前をスペースで区切ります: class="btn primary"。1 つの要素に class を 2 回書いても効きません。ブラウザは最初の属性だけを残します。

2 つのクラスを両方持つ要素を選択するには？

クラスセレクタをスペースなしでつなげます: .btn.primary は両方のクラスを持つ要素に一致します。スペースを入れた .btn .primary は、.btn 要素の内側にある .primary 要素という意味になります。

CSS のクラス名は数字で始められますか？

HTML では可能ですが、セレクタはエスケープしていない数字で始められないため、.1col は無効な CSS です。数字をエスケープする (.\31 col) こともできますが、クラス名は英字で始めるのがよいでしょう。

CSS クラスセレクタと ID セレクタ (.class と #id)