2009年6月16日火曜日

子孫セレクタの活用

XHTMLを最適化するには、無駄なid要素やclass要素を少なくします。
そのためにはこれらのセレクタの代わりに子孫セレクタでの代替を考えます。
たとえば、下のようにdiv要素でul要素をラップする必要はありません。
li要素にスタイルを適用する場合、classセレクタを利用すると下のように li要素ひとつひとつにclass属性をつけることになり面倒です。

li.items { display: inline; ... }
:
:
<ul id=”nav”>
<li class=”items”><a href=”...”>項目1</a></li>
<li class=”items”><a href=”...”>項目2</a></li>
<li class=”items”><a href=”...”>項目3</a></li>
</ul>

しかし子孫セレクタを使えばXHTML側での追加作業は必要ありません。そのためには、主要パーツの方にidづけしておきます。

ul#nav li { display: inline; ... }
:
:
<ul id=”nav”>
<li><a href=”...”>項目1</a></li>
<li><a href=”...”>項目2</a></li>
<li><a href=”...”>項目3</a></li>
</ul>