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

2024.01.03
class属性を複数指定するには

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

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

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

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

  • HTMLで複数のclass属性を指定する方法
  • CSSセレクタで複数のclass属性を指定する方法

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

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

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

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

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

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

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

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

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

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

classを指定して効率的にコーディングする方法を解説非公開: 【 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つです。

  • class名を「 , ( カンマ ) 」で区切る
  • class名を「 ( 半角スペース ) 」で区切る
  • class名を繋げて記述

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」は擬似要素で、指定した要素内のコンテンツの直前に配置されます。

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

\プログラミングを学んで/
人生を変えた3名

インタビュー記事一覧 >

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

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

  • iD > class > セレクタ の順番で適用
  • 複数指定すると優先順位があがる
  • 同じclassやセレクタ内で最後に書いた内容が優先される

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

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

CSSはこちらです。

.class1 .class3 {
  color: blue;
}

.class1,
.class2 {
  color: red;
}

.class4 {
  color: green;
}

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

「今の仕事楽しくないなぁ・・・」

「IT業界に転職してみたいなぁ・・・」

という方、DMMが運営する「WEBCAMP エンジニア転職」をご検討してみてはいかがですか?

WEBCAMP エンジニア転職

「WEBCAMP エンジニア転職」では最短12週間でITエンジニアを目指すことが可能です!

WEBCAMPの卒業生は転職後に年収もUP!(例:年収250万円→500万円)

しかも今なら受講料の最大70%が給付金として支給されます

DMM WEBCAMPは経済産業省・厚生労働省が認定した専門実践教育訓練給付金制度の対象です

DMM WEBCAMPについてもっと詳しく

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

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

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

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

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

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

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5