HTMLでclassを複数指定するときはスペースがポイント

HTMLで一つの要素にclass属性の属性値(クラス名)を一つだけではなく複数指定することができます。

HTMLでclass名をふたつ以上同一要素に指定したり、入れ子になった要素でclassを複数にして、その複数のクラス名をCSSのセレクタにして適用範囲をコントロールしたいなど、HTML側でclassを複数にすることで活用範囲は広がります。

class名を複数にする書き方のポイントはHTMLでもCSSでも「スペース(半角)」がポイントです。よければ読み進めてください。

HTMLで複数のclass指定は半角スペースを開ける

さっそくHTMLで複数のclass指定をするには？の答えです。

タグに指定するclass名を「半角スペースを開けて記述」します。

class属性の値でクラス名を半角スペースを開けて複数のclassを記述するだけです。classを複数指定するときはスペース(半角)で区切ることをポイントとして覚えておけばいいことになります。

でもせっかく記事にしたので、HTMLでclassを複数指定するとき「同一要素」に複数のclass指定と「入れ子構造」で複数のclass指定をした書き方の2パターン説明します。

同一要素でclass名を複数指定する書き方

HTMLのタグをマークアップした同一要素でclass名を複数にする書き方の説明ではサンプルとして、divタグのclass属性の属性値でクラス名を複数にする場合の書き方で説明します。

<div class="parent1 parent2 parent3">
　子要素が入る
</div>

divタグでマークアップしたdivの開始タグにclass属性を指定して、そのclass属性の値に必要な数だけのクラス名を指定し複数にします。

HTMLでは、たったこれだけの書き方で同一要素のclass属性に複数のクラス指定する書き方ができます。

入れ子構造に複数のclass名を指定する書き方

HTMLでclassを複数指定するとき入れ子になった構造のタグに複数のclass属性を付与してクラス名を複数指定する場合の書き方です。

<div class="parent1 parent2 parent3">
    <p class="child1 child-one">入れ子1</p>
    <p class="child2 child-two">入れ子2</p>
</div>

「同一要素にclassの複数指定をする書き方」で説明したdivタグのclass属性に複数のクラス名を指定した親要素の中に、子要素をpタグでマークアップしてHTML構造を入れ子にしてみました。

入れ子構造になっても、HTMLでclassを複数指定するとき書き方は同じです。指定するクラス名を半角スペースで区切って記述します。

クラス名をふたつでも三つでも増やして複数にしても、書き方のポイントになるのはスペースです。全角ではなく半角スペースを使用することに気をつけてください。

HTMLで複数class指定してCSSのセレクタもスペース

HTMLでマークアップしたタグにclass属性を付けておくと、class属性のクラス名をCSSのセレクタで指定することができます。

これを「クラスセレクタ」と言います。

一つの要素に適用するCSSを複数にクラスセレクタで指定することが可能で、その場合は半角のスペースで区切ってクラス名を記述します。

HTMLでclassを複数指定するときのポイントになっていた書き方「複数のクラス名をスペースを開ける」ことはCSSでセレクタ指定のときの書き方でも覚えておきたいポイントになります。

HTMLでclassを複数にした親要素と子要素をセレクタにしてCSSを適用してみたので読み進めてみてください。

親要素で複数指定したclass名をセレクタに活用

HTMLで親要素のdivタグと子要素のpタグにclassを複数指定しておいた以下の入れ子構造の要素で説明します。

<div class="parent1 parent2 parent3">
    <p class="child1 child-one">入れ子1</p>
    <p class="child2 child-two">入れ子2</p>
</div>

親要素divには複数指定した3つのクラス名にしているので、この3つのクラス名を活用して、CSSでスタイルするときにプロパティを振り分けて活用できます。

.parent1 {
    color: #fff;
    background-color: #aab1ff;
}
.parent2 {
    width: 50%;
    margin: 10px;
    padding: 10px;
}
.parent3:hover {
    color: #aab1ff;
    background-color: #fff;
}

例えば上記のCSSの場合

• HTMLでclass=”parent1″をクラスセレクタで.parent1にして、カラー関係にする。
• HTMLでclass=”parent2″をクラスセレクタで.parent2にして、幅や余白関係にする。
• HTMLでclass=”parent3″をクラスセレクタで.parent3:hoverにしてホバー関係にする。

極端な活用例ですが、このようにHTMLでclassを複数指定するとCSS側でもCSSを見やすく分けることができる活用ができます。

子要素で指定した複数class名をセレクタにする

HTMLでマークアップした子要素で指定した複数class名をセレクタにする場合は、以下のように親要素と子要素を半角スペースで区切って指定することができます。

そうすると親要素の中の子要素に指定したclass名が指定されてる要素にCSSを適用できます。

.parent1 .child1 {
    color: pink;
}
.parent1 .child1:hover {
    color: tomato;
}

例えば子要素にp要素が2つあるけど2つのうちどちらか1つだけにホバーさせたい場合、もう一個の子要素にCSSの適用がされずに済むように適用範囲を絞れます。

こうして説明したことを振り返ってみると、HTMLでもCSSでも一つ以上のクラス名を使用して指定する時には、半角スペースで区切った書き方をすることがポイントになってくるので書き方としては簡単に覚えられると思います。

HTMLとCSSでクラス名を複数にする場合のおまけ

最後におまけ的な紹介ですがHTMLで複数のクラス名を指定した場合、CSSで属性セレクタを使用してもいいかもしれません。

たとえば、HTMLで指定したclass属性名とその値が完全に一致する場合にだけ適用するようにしたい場合。

<div class="parent1 parent2 parent3">
    <p class="child1 hoge-one">入れ子1</p>
    <p class="child2 hoge-two">入れ子2</p>
</div>

上記のHTMLの子要素は、ふたつずつのクラス名で複数になっていますが、以下のような書き方をして[class*=”child”]と指定します。

[class*="child"]::before {
    content: '>';
    padding-right: 5px;
}

そうすると、class属性の値で「child」が含まれている複数の要素をCSSの適用範囲にすることができます。