CSS の 1つの要素で複数のクラスを使用する

1. 1つの要素に複数のクラスを割り当て、CSS で両方のクラスのスタイルを一度に設定する
2. 1つの要素に複数のクラスを割り当て、CSS で両方のクラスを個別にスタイル設定する

このチュートリアルでは、CSS の 1つの要素で複数のクラスを使用するメソッドを紹介します。

1つの要素に複数のクラスを割り当て、CSS で両方のクラスのスタイルを一度に設定する

HTML では、class 属性を使用してクラスを要素に割り当てます。p、h1-h6、a、div など、HTML のすべての要素にクラスを適用できます。CSS では、クラスセレクター. を使用します。それぞれのクラス名を持つ要素を選択し、それにスタイルを適用できます。ただし、1つのクラスに複数の要素を割り当てて、クラスのスタイルを設定したい場合があります。このような場合、HTML を使用すると、1つの要素に複数のクラスを割り当てることができます。任意の要素に空白で区切られた複数のクラス名を書き込むことができます。CSS では、両方のクラスを同時に選択することで、このようなクラスのスタイルを設定することもできます。. を使用できますセレクターを使用してファーストクラスを選択し、空白を残さずにセカンドクラスを再度選択します。次に、選択したクラスのスタイルを設定できます。1つの要素に 3つ以上のクラスを割り当て、すべてのクラスに一度にスタイルを適用できます。

たとえば、HTML で 3つの p タグを作成し、それらにクラス名 first、second、および first second を付けます。3 番目のクラスでは、クラス名の間に空白が残っていることに注意してください。p タグの間の 3つのクラスについて、KTM、Honda、Kawasaki のテキストを記述します。CSS でクラス first を選択し、その color を orange に設定します。同様に、クラス second を選択して red に設定し、最後に両方のクラスを .first.second として選択し、色を green に設定します。

以下の例では、1つの要素で複数のクラスを使用し、それらのクラスのスタイルを一度に設定しています。

サンプルコード：

<p class="first">KTM</p>
<p class="second">Honda</p>
<p class="first second">Kawasaki</p>

.first { color: orange; }
.second { color: red; }
.first.second { color: green; }

1つの要素に複数のクラスを割り当て、CSS で両方のクラスを個別にスタイル設定する

1つの HTML 要素に複数のクラスを割り当て、両方のクラスのスタイルを個別に設定して、CSS をより効率的に作成できます。このアプローチを使用すると、適用されるスタイルの冗長性を制御できます。共通のスタイルを複数のクラスに適用し、固有のスタイルを特定のクラスに適用できます。

たとえば、p タグにクラス title を作成し、テキストを記述します。同様に、別の段落タグを作成し、それに複数のクラスタイトルテキストを割り当てます。段落タグにテキストを書きます。CSS で、title クラスを選択し、background-color を skyblue に設定します。次に、text クラスを選択し、それに green の色を付けます。

ここでは、両方の段落の背景色が skyblue に設定されます。これは、背景色を設定するために title クラスのスタイルを設定したためです。そして、両方の段落に title クラスがあります。ただし、このスタイルは text クラスにのみ適用されているため、2 番目の段落の色は green にのみ変更されます。このアプローチにより、単一の要素に複数のクラスを使用して、共通のスタイルと個々のスタイルを要素に適用できます。このようにして、1つの要素に複数のクラスを割り当て、クラスを個別にスタイル設定して、効率的な CSS を作成できます。

サンプルコード：

<p class="title">
 Hello there!
</p>
<p class="title text">
 Welcome to Rara Lake
</p> 

.title {
    margin-bottom: 30px;
    background-color: skyblue;
}

.text {
    color: green;
}