CSSを使った<li>要素の装飾におけるちょっとした小技メモ

Index » Hacks » CSSを使った<li>要素の装飾におけるちょっとした小技メモ

200906

06

Sat

先日の｢ブログデザイン勉強会｣からしばらく経ちましたが、サイドバーもちょこちょこ再びいじったりしてまして、まぁこれで漸く完全リニューアル完了かなぁと思っています。
だいぶ印象変わったかなぁ。まぁ、ちょっと白ベースが増えた感も否めませんが、まぁコレはコレでありかなと。

で、今回はそのサイドバーを改変する際に知ったCSSのちょっとした小技をメモ。

元々うちの場合、特定の<li>要素に対してテキストの下に罫線を表示させていたんですが、ここをちょっとゴニョゴニョすると、最後の<li>要素の下に表示される罫線が消せるというやつです。この方法、全然知らなくて、今回初めて使いました。なので自分用メモ。

これがコレまでの場合。この場合のCSSは、

li{

	padding: 0px 0px 5px 0px;

	list-style: none;

	background: url(line.gif) bottom repeat-x;

	}

という感じで、back-groundに画像を指定しています。
これを、
サイドバーAfter

こんな感じにラストのとこだけ消す場合、

li{

	padding: 0px 0px 5px 0px;

	list-style: none;

	background: url(line.gif) bottom repeat-x;

	}



li:last-child{

	padding: 0px 0px 5px 0px;

	list-style: none;

	background: none;

	}

としてやるだけ。肝心なのが、:last-childという指定ですね。この指定をしてやると、ラストの画像だけ表示しないようになります。

うん、なんかこういう方がスッキリして見える気がしますね。CSSでこういう指定方法があるとはなぁ。日々勉強ですな。

追記 6/6 20:00
sakaki@考LからTwitterで指摘されたところがあったので、ちょっと代替えというか修正というか。
今回、紹介した:last-childはCSS3になるもので、Firefox3.1以降、Safari3.1以降、Opera、Google Chromeには対応しているものの、IEは最新の8であっても未対応なんですね。但し、:first-childはCSS2になるので、IE7以降で対応されています。IE6以前はあれげですが、IEにも対応させる場合、以下のようなCSSがいいかもしれません。

li{

	padding: 5px 0px 0px 0px;

	list-style: none;

	background: url(line.gif) top repeat-x;

	}



li:first-child{

	padding: 5px 0px 0px 0px;

	list-style: none;

	background: none;

	}

一応ご参考までに。