クラスセレクター
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
.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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Class selector ( .className ) |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.