CSSクラスセレクター (.class) - 完全ガイド

CSSクラスセレクター

クラスセレクターはCSSの主力です。特定のclass属性値を持つ要素にマッチし、本番スタイルシートで最も一般的に使用されるセレクターです。

構文

.classname {
  /* スタイル */
}

ドット（.）プレフィックスがクラスセレクターをタイプセレクターと区別します。クラス名はHTMLのclass属性の値と正確に一致する必要があります（大文字小文字区別あり）。

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

HTML要素はスペースで区切られた複数のクラスを持つことができます：

<button class="btn btn-primary btn-large">送信</button>

セレクターをチェインすることで複数のクラスを持つ要素をターゲットにできます：

.btn.btn-primary {
  background: blue;
  color: white;
}

これはbtnとbtn-primaryの両方のクラスを持つ要素にマッチします。チェインされたクラスの詳細度は加算されます：.btn.btn-primaryの詳細度は(0, 2, 0)です。

詳細度

単一のクラスセレクターの詳細度は**(0, 1, 0)**です。これにより、任意の数のタイプセレクターよりも具体的ですが、単一のIDセレクターよりは具体的ではありません。

/* 詳細度: (0, 1, 0) — p { } に勝つ */
.intro { color: blue; }

/* 詳細度: (0, 0, 1) — .intro に負ける */
p { color: red; }

ベストプラクティス

• スタイリングにはIDよりクラスを優先 — クラスは再利用可能、IDは不可
• 意味のある名前を使用 — 外見ではなく役割を記述：.red-textではなく.error-message
• 命名規則に従う — BEM（.block__element--modifier）、SMACSS、またはユーティリティファースト（Tailwind）
• 汎用的すぎる名前を避ける — コンポーネント間で競合する可能性がある.containerや.wrapperなど