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の罫線を上に付ける
といった、（半角スペースを入れずに）「.」で繋ぐ指定です。




同じスタイルシートを実現するのに
<ol></ol>を囲う<div></div>などがあれば、
違うグループ分けによってすることができます。
例えば、以下のような感じです。

［HTML］
<div id="header">
<ol class="menubar">
<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>
</div>

<div id="footer">
<ol class="menubar">
<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>
</div>

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

この方法だと、<ol class="menubar"></ol>が
上下まったく同じタグになるので、更新時、検索置換がやりやすくなります。


その他、上下の<ol><ol>に固有のidを付けていれば、
直接それぞれにスタイルシートをつけることができます。
その場合、わざわざCSSとしてスタイルシートをいくつも分けて書く必要がなくなります。


3つ方法を挙げましたが、どの方法をとるのが良いかはケースバイケースです。
複数のクラス指定は、idで絞り込んで指定することができない場合や、
一つの画面上にいくつも存在している同じクラスを
グループ分けしたい時に有効だろうと思います。