クラスセレクター

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.spacious {
  margin: 2em;
}

/* "spacious" および "elegant" の両方をクラスリストに含む 
  •  要素すべて */
/* 例えば、 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
    この段落は赤い文字です。
    

    この段落は黄色の背景に赤い文字です。
    

    この段落は "fancy" スタイルで赤い文字です。
    

    これは単なる普通の段落です。

    結果

    仕様書

    Specification
    Selectors Level 4
    # class-html

    ブラウザーの互換性

    関連情報