CSS3のセレクタを使ってリストを装飾する

これまで、リストを装飾するために「li」タグにクラスを指定していました。
リストのマークを画像にする、下線をつける、一つ置きに背景を変えるなど、リストはデザインバリエーションの高い要素です。
これら細かい要望を実現するために、これまではクラスを指定して実装していました。

しかし、繰り返し要素に条件に応じてクラスを指定するという事は、CMSなど動的に組み込むために一手間必要という点で、めんどくささがありました。
そこで、今回はクラスを指定せずにCSS3のみで実装してみます。
ちなみにIEなどCSS3に対応していないブラウザでは利用できません。

以下はベースとなるサンプルリストのソースです。装飾のために、特別なクラスは指定しません。

<ul>
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
<li>サンプル４</li>
<li>サンプル５</li>
</ul>

最初の要素または最後の要素を装飾する

一番上、または、一番下の要素を装飾する場合は「:first-child」と「:last-child」を使用します。
例えば、以下のようにスタイルに記述すると、最初の要素のみフォントを大きくして、最後の要素のみに背景色を指定することができます。

ul li:first-child{
	font-weight: bold;
}
ul li:last-child{
	background-color: #ffaaaa;
}

liタグを下線処理した時に、最後の要素だけ下線なし、といった場面に多く出会いますが、そのときに重宝しそうですね。

偶数行目、または、奇数行目の背景色を変えてゼブラ調にし、リストを見やすくする手法がよく使われますが、セレクタ「:nth-child」を使うことで簡単に実現できます。
例えば、1番目、3番目、5番目というように奇数行目の背景色のみ変えたい場合には、以下のようにします。

ul li:nth-child(even){
	background-color: #aaaaaa;
}

CSS3をうまく活用すれば、HTMLタグに無駄にclassを指定する必要がなくなるので、ソースがすっきりします。

updated : 2018.07.10 posted : 2011.07.25