【CSS】複数のclassでセレクタを指定する

CSSでHTMLを装飾する際、複数のclassを組み合わせて使用したい場面がでてきます。
今回は、その時の記述方法を解説していきます。

解説

HTML


CSS


HTMLのサンプルで class=”hoge1 hoge2″ と指定している部分があります。
これが、1つの要素に複数のclassをもたせるときの記述です。
付与したいclass名を半角スペースで区切るだけなので、非常に簡単です。
上記で指定されたdiv要素は、hoge1 であり hoge2 となります。

CSSのサンプル1は、従来どおりのCSSの記述です。
hoge1単体への指定なので特に変わったところはありませんね。

サンプル2は、hoge1内に記述されているhoge3にcssを適用する場合の記述です。
条件としたいclass名を半角スペースで区切ってあげます。
「要素名 class名」や「要素名 要素名」など、様々な場面で使われるメジャーな記述方法です。
必ず入れ子の順番で記述します。

サンプル3は、一見サンプル2と同様に見えますが、class名を半角スペースで区切っていません
これは、hoge1とhoge2が同じ要素に付与されているからです。
同じ要素内の複数のclassを指定する場合は、半角スペースで区切らずにそのまま繋げて記述します。

まとめ

もちろん、このような記述をしなくても同様の装飾を適用することが可能ですが、ソースコードが増え管理が大変になってしまいます。
近年ではWordPressなどのCMSでも多様されているので、是非この機会に覚えておきましょう。

関連記事

no image

【CSS】idとclassの違い

CSS記述の際に用いられる「id」と「class」。 この2つの違い、ちゃんと理解していますか?

記事を読む

no image

CSSでリストタグを横並びにする

通常、リストタグを利用すると、ブラウザ上では以下のように縦に並びます。 このリストをCSSで横並び

記事を読む

no image

CSSでテキストの選択色を変更する方法

ホームページ上のテキストを選択(ドラッグ)した時、大抵は以下のように背景が青くなりませんか?

記事を読む

no image

画像やボタン、divなどのボックスに影をつけるCSS

先日、文字に影をつけるCSSをご紹介しましたが、今回は画像やボタン、divなどのボックスに影をつける

記事を読む

no image

CSSを使って印刷用画面を実装する方法

知っている方も多いと思いますが、地図サービスなどで見かける印刷用画面。 それを自分のホームページで

記事を読む

no image

文字に影をつけるCSS

おそらく、ほとんどの方がホームページ上の文字に影がついているのをご覧になったことがあると思います。

記事を読む

  • Sorry. No data so far.

  • ycDECNFTVOQd (by amoxicillin online pharmacy)
    【サーバー】 ロリポップ
    【プラン】 ixQneWyrfZnD ( 1~2年 )
    感想
    amoxicillin, ... [続きを読む]
    皆様からの評価・クチコミを募集しています。
    ぜひ気軽にご利用ください。
PAGE TOP ↑