CSS のクラスセレクター (class selector) は、 class 属性の内容に基づいて要素をマッチさせます。

/* class="spacious" を持つすべての要素 */
.spacious {
  margin: 2em;
}

/* class="spacious" を持つすべての <li> 要素 */
li.spacious {
  margin: 2em;
}

/* "spacious" および "elegant" の両方をクラスリストに含むすべての <li> 要素 */
/* 例えば、 class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

構文

.クラス名 { スタイルプロパティ }

なお、これは以下の属性セレクターと等価です。

[class~=クラス名] { スタイルプロパティ }

CSS

.classy {
  background-color: skyblue;
}

HTML

<div class="classy">これは特別なクラスがついています!</div>
<div class="foo classy bar">要素には複数のクラスを付けることができ、クラスセレクターも動作します!</div>
<div>これは単なる普通の div です。</div>

結果

仕様書

仕様 状態 コメント
Selectors Level 4
class selectors の定義
草案 変更なし
Selectors Level 3
class selectors の定義
勧告  
CSS Level 2 (Revision 1)
child selectors の定義
勧告  
CSS Level 1
child selectors の定義
勧告 初回定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり

ドキュメントのタグと貢献者

このページの貢献者: FumiyaShibusawa, mfuji09, ethertank, sii
最終更新者: FumiyaShibusawa,