クラスセレクター

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Class selector (.className)Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応