1つのタグに複数のclassで条件分岐っぽい指定

スタイルシートのセレクタは、いうなればタグのグループ化で、
このグループの中のこのグループ、さらにその中のグループと指定できるのですが、
1つのグループだけでなく、複数のグループにまたがってする指定が結構重宝します。

【例】上下に二つのメニューバーを並べる場合

［HTML］
<ol class="menubar header">
<li><a href="pageA/index.html">リンクA</a></li>
<li><a href="pageB/index.html">リンクB</a></li>
<li><a href="pageC/index.html">リンクC</a></li>
</ol>

<ol class="menubar footer">
<li><a href="pageA/index.html">リンクA</a></li>
<li><a href="pageB/index.html">リンクB</a></li>
<li><a href="pageC/index.html">リンクC</a></li>
</ol>

［CSS］
ol{
margin: 0px; padding: 0px;
}
ol.menubar li{
display: inline;
}
ol.menubar.header{
border-bottom: 3px solid #000; padding-bottom: 10px;
}
ol.menubar.footer{
border-top: 3px solid #000; padding-top: 10px;
}

ol.menubar.headerで
上のメニューバーには3pxの罫線を下に付け、
ol.menubar.footer
下のメニューバーには同じく3pxの罫線を上に付ける
といった、（半角スペースを入れずに）「.」で繋ぐ指定です。




続きを読む