初めに
HtmlのdivタグやspanタグにCSSを適用するためには、id名もしくはclass名を付けます。特にcalssセレクタは頻繁に使われていますが、その中でも複数のクラス名を一つの要素に並べるケースについてその理由とcssの記述について纏めてみました。
目次
- idとclassの違い
- 同じタグ内に複数のclass名を付ける理由
- 同じタグ内に複数のclass名が並んだ場合のCSS記述
- 複数のクラス名が入れ子構造（ネスト）の場合
- 複数のclassに同じcssを適用する場合
- まとめ
idとclassの違い
id属性はhtml文書内でたった一つしかない要素に対してスタイルを適用する時に使います。なので同じ文書内に同じid名が複数存在することはあり得ません。これに対してclass属性の場合、複数のタグに同じclass名を付けてそれぞれ同じスタイルを適用することができます。「この部分は絶対このスタイルにしたい、他の要素タグとスタイルが被りたくない」と言う場合を除いて、class属性を使った方が無難です。
同じタグ内に複数のclass名を付ける理由
色んなケースがあると思いますが代表的な例としては、cssを利用したアニメーションを作る場合が挙げられます。z-indexを指定し、layer構造にしてそれぞれ違うスタイルを適用する場合に複数のclass名を並べます。cssアニメーションについては下記のサイトをご利用ください。
同じタグ内に複数のclass名が並んだ場合のCSS記述
divタグ内にapplicationとexampleと言う２つのクラス名が並んだケースを見てみると
①HTML
<div class="application example">application <br>
</div>
②CSS
.application.example {
color: #3f32d3;
}
ここでポイントになるのが、「.application」と「.example」の間を半角スペースなどで空けてはいけません。理由は同じタグ内にクラス名が並んでいるからです。これと似たような記述で間違えやすいのが次の様なケースです。
複数のクラス名が入れ子構造（ネスト）の場合
次のように適用したいクラスの要素がexampleで、example要素がapplication要素に対して親子関係にある場合は次のように
CSSを記述します。
①HTML
<div class="application"> <br>
<section class="example">example
</section>
</div>
②CSS
.application .example {
color: #3f32d3;
}
この場合、「.application」と「.example」の間は半角スペース１個分を空けなければなりません。その理由はapplicationクラスとexampleクラスがネスト構造で離れているからです。
複数のclassに同じcssを適用する場合
最後に次の様に複数の異なるクラスに同じスタイルを適用する場合には以下の様に記述します。
①HTML
<div class="kind-1">kind-1</div>
<div class="kind-2">kind-2</div>
②CSS
.kind-1,.kind-2 {
color: pink;
}
ポイントは「.kind-1」クラスと「.kind-2」クラスの間に「,」を入れつことです。
##まとめ
以上をまとめて表示すると次のようになります。
①HTML
<body>
<div class="application example">application<br>
<section class="example">example
</section>
</div>
<div class="trip" id="helper">trip</div>
<div class="kind-1">kind-1</div>
<div class="kind-2">kind-2</div>
</body>
②CSS
.application .example {
color: #3f32d3;
}
.application.example {
color: #f324df;
}
.trip#helper {
color: #aafef6;
}
.kind-1,
.kind-2 {
color: pink;
}
③画像
