この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:4
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: クラスセレクタ
SEOタイトル: CSS クラスセレクタ - ドット記法 / 複数クラス / 要素との組み合わせ / BEM 命名規則

この記事の要点
  • クラスセレクタは .classname の形でドットに続けて HTML の class 属性値を書く CSS セレクタ
  • 同じクラス名を持つすべての要素に同じスタイルを当てられる（複数要素への一括適用に最適）
  • 要素名.classname で特定の要素タイプに絞り込み、.a.b で両方持つ要素のみ選択
  • 詳細度は 0,1,0。ID（0,1,0,0）より弱く、要素セレクタ（0,0,0,1）より強い
  • 実務では BEM（.block__element--modifier）など命名規則で衝突を避ける

クラスセレクタとは

クラスセレクタは、HTML の class 属性値を CSS から指定するためのセレクタです。ドット（.）に続けてクラス名を書き、その値を持つすべての要素にスタイルを適用します。

同じ class 値は1 つのページ内で何度でも使えるため、ボタン・カード・見出しといった繰り返し使うパーツのスタイル定義に向いています。

基本構文

/* .subtitle クラスが付いた要素すべてに適用 */
.subtitle {
  color: #fff;
  font-size: 14px;
}
小見出し


補足テキスト


どの要素でも適用される

記法のバリエーション

セレクタ意味
.btnclass="btn" を持つすべての要素
p.subtitle

のみ（要素を絞る）

.btn.primarybtn と primary を両方持つ要素
.btn .icon.btn の子孫にある .icon
.btn > .icon.btn の直接の子の .icon
.btn, .link.btn または .link（カンマで OR）

HTML 側で複数クラスを付ける

class 属性はスペース区切りで複数のクラスを指定できます。これにより機能の重ね合わせ（基本ボタン + 配色バリアント）が表現できます。



.btn          { padding: 8px 16px; border-radius: 4px; }
.btn.primary  { background: #3498db; color: #fff; }
.btn.danger   { background: #e74c3c; color: #fff; }

詳細度（Specificity）

セレクタの優先度は (インライン, ID, クラス, 要素) の 4 桁で計算されます。クラスセレクタはクラスの桁を 1 つ増やします。

セレクタ詳細度
p0,0,0,1
.subtitle0,0,1,0
p.subtitle0,0,1,1
.btn.primary0,0,2,0
#header0,1,0,0
style="..."（インライン）1,0,0,0

ID セレクタとの使い分け

セレクタ記法用途
クラス.name繰り返し使えるパーツのスタイル
ID#nameページ内で1 回だけの要素

実務では CSS は基本クラスセレクタで書き、ID はリンクのアンカーや JavaScript の参照に取っておく方針が主流です。

命名規則：BEM

クラスが増えると衝突や上書きでカオスになりがちです。BEM（Block / Element / Modifier）はクラス名を以下のように構造化する命名規則です。


  
タイトル

  
本文
  • Block（.card）— 独立した部品
  • Element（.card__title）— Block の構成要素。__ で繋ぐ
  • Modifier（.card__button--primary）— 状態 / バリアント。-- で繋ぐ

属性セレクタとの違い

記法マッチ条件
.fooclass に foo を含む（スペース区切り）
[class="foo"]class が完全一致で foo
[class~="foo"].foo と同じ意味（スペース区切りで含む）

まとめ

  1. クラスセレクタは .name で class 属性を狙う
  2. 同じクラスは複数要素に付けられ、一括スタイル変更に最適
  3. .a.b で複数クラス AND、.a, .b でOR
  4. 詳細度は 0,0,1,0。ID より弱く、要素より強い
  5. BEM などの命名規則で衝突を予防する

疑似クラスと組み合わせる

クラスセレクタは :hover や :nth-child(...) などの疑似クラスと自由に組み合わせられます。これによりホバーやフォーカス、特定位置の要素だけにスタイルを当てられます。よく使う組み合わせを挙げます。

セレクタ意味
.btn:hoverマウスオーバー時の .btn
.input:focusフォーカス時の .input
.list-item:nth-child(odd)奇数番目の .list-item（ゼブラストライプ）
.menu li:first-child.menu 内の最初の li
.btn:not(.disabled)無効化されていない .btn だけ

子孫セレクタ・直接子セレクタ・隣接セレクタ

クラスは単独で書くだけでなく、結合子と組み合わせて DOM 構造を絞り込めます。よく使う 4 種類を整理します。

結合子例意味
スペース（子孫）.card .title.card の子孫の .title
>（直接子）.card > .title.card の直接の子の .title
+（隣接兄弟）.title + .desc.title の直後の兄弟の .desc
~（一般兄弟）.title ~ .desc.title 以降の同じ親内のすべての兄弟の .desc

JavaScript からクラスを操作する

状態（開閉 / 選択 / エラー）に応じてクラスを付け外しすると、スタイルと挙動を分離できます。classList API を使うのが現代的です。

const el = document.querySelector('.menu');
el.classList.add('is-open');       // 追加
el.classList.remove('is-open');    // 削除
el.classList.toggle('is-open');    // 反転
el.classList.contains('is-open');  // 判定

状態クラスの命名

慣習意味
.is-active / .is-open / .is-disabled状態（state）クラス。動的に付け外し
.has-error / .has-icon修飾（含む）
.js-trigger / .js-modalJavaScript 専用フック（スタイル非依存）

関連

  • セレクタ — CSS のターゲット指定全般
  • ID セレクタ — #name で 1 つだけ指定
  • 属性セレクタ — [attr=value]
  • 詳細度 — セレクタの優先度計算
  • class属性 — HTML 側のクラス指定