CSSクラスセレクター

CSSクラスセレクターは、一致するクラス名属性が付加されているすべてのHTML要素を対象としています。

クラスセレクター構文：

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

これは、属性値と同じクラス名を持つHTML要素です。

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

CSSクラスセレクター.class-name <div>に添付されています class-nameを持つ要素 属性。つまり、.class-nameに追加するスタイリングプロパティはすべて CSSスタイルシートでdivに適用されます。

ドット（. ）クラスの名前の前に特定のCSS構文があります。クラス名をクラス属性としてHTML要素に追加する場合、.は使用しません。 。

それでは、実際の例で学んだことを使用してみましょう。

これがHTMLの<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="my-button">Button</button>

結果：

CSSクラスセレクターの使用について知っておく必要のある最も重要なことを学びました。

知っておきたいこと：

• CSSクラスは、1回しか使用できないIDセレクターとは異なり、任意のHTML要素で再利用できます。
• 同じ要素に複数の異なるCSSクラスを追加できます<div class="first-class second-class third-class" 。これにより、Tailwind CSSフレームワークで見られるような、小さなユーティリティクラスを使用して要素デザインを柔軟に組み立てることができます。