CSSクラスセレクター (.classname) — クラスによる要素の選択

CSSクラスセレクターがclass属性によって要素をターゲットする仕組みを学びます。詳細度、複数クラス、クラス命名のベストプラクティスについて理解します。

Basic Selectors

詳細な説明

CSSクラスセレクター

クラスセレクターは、最もよく使用されるCSSセレクターの一つです。ドット(.)プレフィックスの後にクラス名を付けて、class属性の値で要素をターゲットします。

構文

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

仕組み

.buttonと記述すると、ブラウザはDOMの中からclass属性に「button」という単語を含むすべての要素を検索します。IDセレクターとは異なり、複数の要素が同じクラスを共有できるため、クラスセレクターは再利用可能なスタイルに最適です。

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

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

<div class="card featured highlighted">...</div>

スペースなしでチェーンすることで、すべてのクラスを持つ要素をターゲットできます:

.card.featured.highlighted {
  /* 3つのクラスすべてを持つ要素のみにマッチ */
}

詳細度

単一のクラスセレクターの詳細度は**(0, 1, 0)**です。これは要素セレクター(0, 0, 1)より高く、IDセレクター(1, 0, 0)より低い値です。2つのルールが同じ詳細度を持つ場合、スタイルシート内で最後に記述されたものが優先されます。

ベストプラクティス

  • 意味のある説明的なクラス名を使用する(.n1ではなく.nav-item
  • BEM(.block__element--modifier)などの命名規則に従う
  • 単純なクラスで十分な場合は、過度に詳細なセレクターを避ける
  • スタイリングにはIDよりクラスを優先する(IDは詳細度が高すぎる)

ユースケース

クラスセレクターは現代のCSSアーキテクチャの基盤です。Tailwind CSS、Bootstrap、BEM手法はすべてクラスセレクターに大きく依存しています。フロントエンド開発者はコンポーネントのスタイリング、再利用可能なデザイントークンの作成、レスポンシブレイアウトの構築に日々使用しています。詳細度が低く複数の要素で再利用できるため、IDセレクターよりも好まれます。

試してみる — CSS Selector Tester

フルツールを開く