CSS クラスセレクター

JPKODA 編集部 May 6, 2026

クラスセレクターは、HTML要素に割り当てた class 属性に基づいて、特定の要素にスタイルを適用します。

このターゲットを絞ったアプローチにより、再利用可能なスタイルを作成し、スタイルシートをクリーンかつ組織的に保つことができます。すべての <p> タグなど、特定のタイプの要素すべてにスタイルを適用する要素セレクターとは異なり、クラスセレクターはよりきめ細やかな制御（グラニュラリティ）を提供します。同じHTMLタグを共有していても、要素ごとに見た目を区別することが可能です。本記事では、クラスセレクターの構文、使用法、そしてベストプラクティスについて包括的に解説します。

1. クラスセレクターを理解する

CSSにおけるクラスセレクターは、ドット（.）の後にクラス名を続けて定義します。このセレクターは、指定された class 属性を持つすべてのHTML要素をターゲットにします。class 属性はグローバル属性であるため、あらゆるHTML要素に適用できます。

1.1 構文

.class-name {
  property: value;
  /* その他の CSS 宣言 */
}

1.2 示例

例えば、以下のようなHTMLがあるとします。

<p class="highlight">この段落はハイライト表示されます。</p>
<p>この段落はハイライトされません。</p>

そして、以下のCSSを適用します。

.highlight {
  background-color: yellow;
  font-weight: bold;
}

この場合、最初の段落だけが黄色の背景と太字になります。なぜなら、それが "highlight" クラスを持つ唯一の要素だからです。二番目の段落には影響しません。

2. 複数のクラスを適用する

クラスセレクターの大きな利点の一つは、一つのHTML要素に複数のクラスを割り当てられることです。これにより、異なるスタイルを組み合わせて複雑なビジュアル効果を作り出すことができます。

<div class="box highlight rounded">これは複数のスタイルを持つボックスです。</div>

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

.rounded {
  border-radius: 10px;
}

この例では、div 要素に "box"、"highlight"、"rounded" の3つのクラスが指定されています。各クラスが要素全体のスタイルに寄与しています。"box" クラスが基本サイズと背景を定義し、"highlight" が黄色の背景（boxの薄い青色を上書き）と太字を追加し、"rounded" が角を丸くしています。これは、クラスを組み合わせることで、いかに再利用可能でモジュール化されたスタイルを作成できるかを示しています。

3. 優先順位 (Specificity) とクラスセレクター

優先順位（詳細度）はCSSにおける重要な概念で、複数のルールが同じ要素に適用された場合、どのスタイルルールが優先されるかを決定します。

クラスセレクターの優先順位は要素セレクターよりも高いですが、IDセレクターよりは低くなります。

以下の例を考えてみましょう。

<p class="special-text">これは特別な段落です。</p>

p {
  color: blue; /* 要素セレクター */
}

.special-text {
  color: red; /* クラスセレクター */
}

この場合、クラスセレクター（.special-text）の優先順位が要素セレクター（p）よりも高いため、段落は赤色になります。もしインラインスタイル（例：<p style="color: green;">）がある場合は、それが最も高い優先順位を持つため、クラスセレクターも要素セレクターも上書きされます。

4. クラスセレクターのネスト (子孫セレクター)

クラスセレクターを他のセレクターの中にネスト（入れ子に）して、より具体的なターゲット設定を行うことができます。これにより、特定の親要素の内部にある特定のクラスを持つ要素にのみスタイルを適用できます。

<div class="container">
  <p class="text">これはコンテナ内の段落です。</p>
</div>
<p class="text">これはコンテナ外の段落です。</p>

.container .text {
  color: green; /* .container 内部の .text にのみ適用 */
}

.text {
  color: blue; /* すべての .text に適用 */
}

この例では、class="container" を持つ div の中にある段落は緑色になり、外にある段落は青色になります。これは .container .text というセレクターが、単独の .text セレクターよりも具体的（詳細度が高い）であるためです。

5. クラスセレクター使用のベストプラクティス

記述的なクラス名を使用する： 要素の用途や機能が明確にわかるクラス名を選びましょう。"style1" や "element2" のような汎用的な名前は避け、"product-title"、"navigation-link"、"article-summary" といった名前を採用します。
命名規則に従う： BEM (Block, Element, Modifier) や SMACSS のような一貫した命名規則を遵守することで、整理されメンテナンスのしやすいスタイルシートを維持できます。
過度な具体化を避ける： ネストされたセレクターは便利ですが、上書きや再利用が困難になるほど具体的なセレクターを作るのは避けましょう。セレクターは可能な限りシンプルに保ちます。
再利用性を優先する： 複数の要素やページで再利用できるようにクラスを設計してください。これによりコードの重複が減り、スタイルシートがより効率的になります。

6. 実戦示例とデモンストレーション

6.1 示例 1：ナビゲーションメニューのスタイル設定

<nav>
  <ul>
    <li><a class="nav-link active" href="#">ホーム</a></li>
    <li><a class="nav-link" href="#">アバウト</a></li>
    <li><a class="nav-link" href="#">サービス</a></li>
  </ul>
</nav>

.nav-link {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: black;
}

.nav-link:hover {
  background-color: lightgray;
}

.nav-link.active {
  background-color: blue;
  color: white;
}

この例では、すべてのナビゲーションリンクが .nav-link クラスで定義された基本スタイルを共有しています。.active クラスは、現在選択されているリンクをハイライトするために使用されます。.nav-link.active（スペースなしで2つのクラス名を繋げる）という書き方に注目してください。これは、両方のクラスを同時に持つ要素をターゲットにします。

6.2 示例 2：カードレイアウトの作成

<div class="card">
  <img class="card-image" src="image.jpg" alt="カード画像">
  <div class="card-body">
    <h2 class="card-title">カードタイトル</h2>
    <p class="card-text">カードの内容...</p>
    <a class="card-button" href="#">続きを読む</a>
  </div>
</div>

.card {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ... 他の子要素のスタイルは省略 ... */

.card-button {
  display: inline-block;
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border-radius: 3px;
}

ここでは、クラスセレクターを使用して再利用可能なカードコンポーネントを作成しました。このようなモジュール式のアプローチにより、一貫したスタイルを持つ複数のカードを簡単に作成できます。

6.3 示例 3：フォーム要素のスタイル設定

.form-group { 
  margin-bottom: 15px; 
}

.form-control { 
  width: 100%; 
  padding: 8px; 
  border: 1px solid #ccc; 
}

.btn { 
  padding: 10px 20px; 
  border: none; 
  cursor: pointer; 
}

.btn-primary { 
  background-color: #007bff; 
  color: white; 
}

この例は、入力ボックス用の .form-control、ボタンの基本スタイル用の .btn、特定の色のボタン用の .btn-primary など、クラスを使用してフォームのスタイルを標準化する方法を示しています。