見出し画像

【Week3】CSSでlastがつかなくても認識されているのは何故ですか?

week3のセクション9で.boxの中のh3のカラー変更(デザイン)について、元のHTMLでは一つ
div class="box last"とあると思うのですが、CSSでlastがつかなくても認識されているのは何故ですか?
そしてこの場合、例えば"box last"だけデザインを付けるにはどうするのでしょうか?HTMLの時点で別のものにしておくのでしょうか?

.box{
width:250px;
float:left;
margin:0 25px 0 0;
}

HTMLで
class="box last"
このようにclass=の中に空白で区切ったものがある場合、boxクラスとlastクラスを適用する、という意味になります。
box lastという名前のクラス名ではないのです。
また、こちらの指定はもっともっと増やすこともできます。
class="a b c d e"
このように書くとaクラスとbクラスcクラスとdクラスとeクラスのデザイン指定が適用されます。
また


<div class="box last">
<img src="images/ph_03.jpg" />
<h3>JavaScript</h3>
<p>主にブラウザの中で動くプログラミング言語です。<br>
webページにダイナミックな動きを付ける際に使われます。
</p>
</div>


このdiv要素にだけ、何かデザインを付けたい場合には、2つやり方があります。
①lastクラスに書く
現在このウェブページにlastクラスは1か所しか付与されていないので、このようにlastクラスに書けば、
該当のdiv要素へのデザイン指定になります。


.last {
デザイン指定
}


別のところにもlastクラスを付けた場合、同じデザインが適用されるので注意が必要です。
②新しいクラスを付与する


<div class="box last xxx">

と変更して
css側で

.xxx {
デザイン指定
}


と書く。
クラスの名前は付けるデザインや役割を示すものにするのが良いです。
lastクラスはこれが最後の箱だよ、という意味で付けた命名です。
なので、最後の箱だからこそつけるべきデザイン指定を書くのが適切です。
(margin-right:0;のようなものです)
それ以外の指定は②のように新しいクラスを作成したほうが確実でしょう。

いいなと思ったら応援しよう!