We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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>これは単なる普通の 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 あり あり あり

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

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