CSS：グラデーションリスト

擬似クラスfirst-childと隣接セレクタでグラデーションを表現する。

Example

1. 04-04（月）21:35  white_wild_flower
2. 04-04（月）21:06  響子さん（萌え）
3. 04-03（日）21:26  iPod shuffle 3
4. 04-03（日）19:58  色考察 - 色相
5. 04-03（日）18:37  カレンダー

HTML

<ol id="index">
<li>04-04（月）21:35&nbsp;
<a href="http://sug.blog2.fc2.com/blog-entry-120.html">white_wild_flower</a></li>
<li>04-04（月）21:06&nbsp;
<a href="http://sug.blog2.fc2.com/blog-entry-119.html">響子さん（萌え）</a></li>
<li>04-03（日）21:26&nbsp;
<a href="http://sug.blog2.fc2.com/blog-entry-118.html">iPod shuffle 3</a></li>
<li>04-03（日）19:58&nbsp;
<a href="http://sug.blog2.fc2.com/blog-entry-117.html">色考察 - 色相</a></li>
<li>04-03（日）18:37&nbsp;
<a href="http://sug.blog2.fc2.com/blog-entry-116.html">カレンダー</a></li>
</ol>

CSS

#index {
line-height: 1.6;
}
#index li a {
text-decoration: none;
}
#index li a:hover {
color: #c00;
text-decoration: underline;
}
#index li:first-child,
#index li:first-child a {
color: #000;
}
#index li:first-child+li,
#index li:first-child+li a {
color: #444;
}
#index li:first-child+li+li,
#index li:first-child+li+li a {
color: #888;
}
#index li:first-child+li+li+li,
#index li:first-child+li+li+li a {
color: #aaa;
}
#index li:first-child+li+li+li+li,
#index li:first-child+li+li+li+li a {
color: #ccc;
}
#index li:first-child a:hover {
color: #b00;
}
#index li:first-child+li a:hover {
color: #c44;
}
#index li:first-child+li+li a:hover {
color: #b88;
}
#index li:first-child+li+li+li a:hover {
color: #eaa;
}
#index li:first-child+li+li+li+li a:hover {
color: #fcc;
}

Recent Entries をさらに強調しようという試みです。項目を特定することができるので、最新着3件だけフォントを大きくするなどのアイディアも実現できます。