CSSクラスセレクターとは？基本構文から実践例までわかりやすく解説

CSSクラスセレクターは、HTML要素に付与されたclass属性の値が一致するすべての要素を対象に、スタイルを適用するためのセレクターです。同じデザインを複数の要素にまとめて適用できるため、CSSの中でも最も使用頻度の高いセレクターの一つです。

クラスセレクターの基本構文

クラスセレクターは、クラス名の先頭にドット（.）を付けて次のように記述します。

.class-name {
    property-name: value;
}

対応するHTML側では、class属性として同じクラス名を指定します。

<div class="class-name"></div>

このように、CSSで定義した.class-nameは、class属性に「class-name」を持つ<div>要素に紐づきます。スタイルシート内で.class-nameに追加したプロパティは、すべてこのdiv要素に反映されます。

なお、クラス名の前につくドット（.）はCSS特有の記法です。HTML側でclass属性としてクラス名を指定するときにはドットを付けないので、混同しないよう注意しましょう。

実践例：ボタンのデザインをカスタマイズする

それでは、学んだ内容を実践的な例で確認してみましょう。まずは、ブラウザのユーザーエージェントスタイルシート（デフォルトスタイル）が適用された、装飾のない<button>要素です。

<button>Button</button>

表示結果：

少し味気ない仕上がりですね。そこで、デフォルトのボタンスタイルを上書きするために、.my-buttonというCSSクラスを作成し、スタイルプロパティを設定してみます。

.my-button {
    font-size: 18px;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    background-color: #F7575C;
    color: white;
}

作成したクラスを、button要素のclass属性として追加します。

<button class="my-button">Button</button>

表示結果：

たったこれだけで、オリジナルデザインのボタンが完成しました。CSSクラスセレクターを使ううえで必要な要点は、これでひと通りマスターできたと言えるでしょう。

覚えておきたいポイント

• クラスは何度でも再利用できる：IDセレクターは1つのページで1回しか使えませんが、クラスセレクターは任意の数のHTML要素に対して何度でも適用できます。
• 1つの要素に複数のクラスを指定できる：<div class="first-class second-class third-class">のように、スペース区切りで複数のクラスを組み合わせられます。小さなユーティリティクラスを積み重ねて柔軟にデザインを構築できるのが大きな魅力で、Tailwind CSSなどのフレームワークもこの手法を採用しています。