クラスセレクター

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSSクラスセレクター (class selector) は、 class 属性の内容に基づいて要素を選択します。

css
/* class="spacious" であるすべての要素 */
.spacious {
  margin: 2em;
}

/* class="spacious" であるすべての <li> 要素 */
li.spacious {
  margin: 2em;
}

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

構文

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

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

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

CSS

css
.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

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

HTML

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

結果

仕様書

Specification
Selectors Level 4
# class-html

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Class selector (.className)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報