htmlプリントを作るのに、CSSやhtmlを学習し直すことを余儀なくされている…
CSSを柔軟・効率的に記述するためのセレクタの記述方法をまとめておく
基本指定
あるクラスに対してスタイルを適用する
.boxA{…}
適用される例
<div class=”boxA”>…</div>
複数条件指定
2つ以上のクラス名を持つ要素にのみ適用
クラス名を「スペースなしで」つなげる
.boxA.weak{…}
適用される例
<div class=”boxA weak”>…</div>
複数クラスへの適用
複数のクラスに対して同じスタイルを適用する
カンマで区切る
.boxA,.boxB{…}
適用される例(どちらも同じスタイルになる)
<div class=”boxA”>…</div>
<div class=”boxB”>…</div>
特定親の子にのみ適用
クラス1の子要素になっているクラス2にのみ適用
クラス名を「スペースを入れて」つなげる
.boxA .title{…}
適用される例(boxA中のtitleにスタイルが適用される)
<div class=”boxA”>
<div class=”title”>…</div>
</div>