【HTML・CSS】class属性を複数指定するには？CSSセレクタを並べる方法もサンプルコードで解説

CSSでスタイルを記述する際に、CSSセレクタに複数のclass属性を使いたいときがありませんか？

複数のclass属性に同じスタイルの指定ができれば、CSSの記述が簡略化され、動作が軽くなりますよね。

また、HTMLの要素内でclass属性を複数指定すると、複数のスタイルを組み合わせることができます。

今回は、HTMLとCSSでclass属性を複数使いたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、HTMLとCSSでclass属性を複数指定する方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

HTMLでclass属性の値を複数指定

HTMLの要素にclass属性を指定すると、CSSで個別にスタイルを指定することができるようになります。

このclass属性には、複数の値を指定することができます。

<div class="sample bluebg">
  <p>複数のスタイルが適用される。</p>
</div>

class属性を複数指定するには、上記のように、半角スペースを空けて別々のclass名を記述します。

「,（コロン）」や「.（カンマ）」では、うまく機能しないので、必ず半角スペースを利用してくださいね。

これにより、1つの要素に対して、複数のスタイルを適用することができるようになります。

非公開: 【 CSS 】classを指定して効率的にコーディングする方法を解説

複数のclass属性を指定するメリット

複数のclass名を指定することで、どのようなメリットが生まれるのでしょうか？

class名を複数指定すると、CSSの役割を分担できるようになります。

「構造」や「色」などで分けて書くことにより、個々のclass名の役目が分かりやすくなり、CSSが見やすくなります。

<div class="sample bluebg">
  <p>ボックスA</p>
</div>
<div class="sample redbg">
  <p>ボックスB</p>
</div>

CSSは、以下のように記述します。

.sample{
 width: 350px;
 height: 50px;
 padding: 15px;
 display: block;
}
.bluebg{
 background: blue;
}
.redbg{
 background: red;
}

sampleでは、要素のサイズや位置などの「構造」を指定し、bluebgとredbgでは、見た目となる背景の「色」を指定しています。

こうすることで、構造が同じで背景色が異なる2つのボックスを作成することができます。

「構造」や「色」で分けずに書くと、背景色が変わるたびに、高さや横幅の指定を書く必要が出てくるため、CSS全体の記述が増えてしまいます。

簡略化するためにも、class属性に複数のclass名を指定することが大事になってきます。

CSSで複数のclass名を指定

CSSのセレクタにも複数のclass名を指定することができます。

指定方法は主に3つです。

HTMLは以下のものを使用します。

<div class="parent1">
  <p class="p1 child1">子要素A</p>
  <p class="child2">子要素B</p>
  <p class="child3">子要素C</p>
</div>
<div class="parent2">
  <p class="child1">子要素D</p>
</div>

これにCSSでスタイルを指定すると、どのように表示されるのかそれぞれ解説していきましょう。

class名を「 , ( カンマ ) 」で区切る

.child1,.child2 {
 color: red;
}

CSSセレクタに、「 , ( カンマ ) 」で区切ったclass名を指定することで、複数の要素に対して同じスタイルを適用することができます。

上記では、class名がchild1とchild2の要素の文字が赤くなります。

class名を「 ( 半角スペース ) 」で区切る

.parent2 .child1 {
 color: red;
}

CSSセレクタに、「 ( 半角スペース ) 」で区切ったclass名を指定することで、適用範囲を絞り込むことができます。

上記では、parent2を親要素に持つchild1が適用範囲となり、文字が赤くなります。

class名を繋げて記述

.p1.child1 {
 color: red;
}

CSSセレクタに、複数のclass名を繋げて記述する方法でも、適用範囲を絞り込むことができます。

上記では、class名にp1とchild1の両方がある要素のみが適用範囲となり、文字が赤くなります。

セレクタを複数指定する他の方法

CSSのセレクタを複数指定する際に、class名以外のものを使用することが可能です。

そちらの方法もいくつか紹介していきます。

複数の属性セレクタを指定する

<style>
a[href][class]{
 color: red;
}
</style>

<p><a href="#" class="sample">リンクA</a></p>
<p><a href="#" >リンクB</a></p>

属性セレクタを指定すると、スタイルの適用範囲を絞り込むことができます。

上記では、href属性とclass属性が指定された1つ目のa要素の背景のみが青くなります。

擬似クラスと属性セレクタを指定する

<style>
a:link[class="sample"]{
 color: green;
}
</style>

<p><a href="test1.html" class="sample">未訪問のリンク</a></p>
<p><a href="test2.html" class="sample">訪問済みのリンク</a></p>

「:link」は疑似クラスで、まだ訪問していないリンクを示します。

「class=”sample”」の未訪問リンクにスタイルが適用されます。

擬似クラスと擬似要素を指定する

<style>
a:link::before {
 content:"こんにちは";
 color: red;
}
</style>

<p><a href="test1.html">未訪問のリンク</a></p>
<p><a href="test2.html">訪問済みのリンク</a></p>

「::before」は擬似要素で、指定した要素内のコンテンツの直前に配置されます。

上記では、「未訪問リンク」の直前に「こんにちは」という文字列が挿入されます。

複数指定の際の優先順位について

CSSには優先順位があります。

このようなルールがある中で、下記コードだと何色が反映されると思いますか？

<div class="class1">
  <div class="class2 class3 class4">Hello</div>
</div>

CSSはこちらです。

.class1 .class3 {
  color: blue;
}

.class1,
.class2 {
  color: red;
}

.class4 {
  color: green;
}

正解は青色が反映されます、このように複数指定することにより、優先順位が高くなります。
コーディングをする際には、適用範囲を確認していく必要があります。

まとめ：class属性の複数指定は応用編として大事

今回は、HTMLとCSSで複数のclass属性を指定する方法を解説しました。

HTMLの要素内にclass名を複数指定することで、構造や色でスタイルを分けて書けるようになり、CSSが見やすくなるという話でした。

加えて、CSSセレクタで複数のclass名を指定する方法も紹介しましたね。

複数のclass名を組み合わせることで、スタイルの適用範囲を絞り込むことができるようになります。

今回の記事が参考になれば幸いです。