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

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}

HTML

<p class="red">この段落は赤い文字です。</p>
<p class="red yellow-bg">この段落は黄色の背景に赤い文字です。</p>
<p class="red fancy">この段落は「fancy」スタイルで赤い文字です。</p>
<p>これは単なる普通の段落です。</p>

結果

仕様書

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

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

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

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