クラスセレクタ【class selector】

概要

クラスセレクタ（class selector）とは、CSSのセレクタの一つで、要素に設定されたclass属性の値に基づいて選択を行うもの。「.クラス名」のように先頭を「.」(ドット/ピリオド)にする。

Webページの見栄えを記述するCSS（Cascading Style Sheet）では、「セレクタ {スタイル}」という記法を基本とし、セレクタで指定した要素に対してスタイルを適用する。要素を何に基づいて選択するかによっていくつかのセレクタが用意されている。

クラスセレクタは「.」で始まるセレクタで、指定された値がclass属性の値に一致する要素を選択する。例えば、「.myClass」と記述すると、HTMLファイル内で「class="myClass"」と設定されている要素群が選択される。

セレクタは「,」（カンマ）で区切って複数指定することもでき、「.red-text, .bold-text {スタイル}」と記述するとred-text、bold-textのいずれかに対してもスタイルが適用される。class属性もスペース区切りで複数のクラスを指定することができ、「class="red-text bold-text"」とするとその要素はred-textクラス、bold-textクラスの両方に属する。

(2023.6.8更新)