箇条書きマークでランキングを表現したい
ランキングなどを表示する場合に、先頭に順位がわかるようなアイコンをつけたいときや<li>など同じ要素が連続するときに、個別に別々のスタイルを適用したいときの解説をしています。
箇条書き（<ol>）に含まれる<li>の先頭に、リストマークの代わりに背景画像を表示します。ただし、すべてのリスト項目に同じ背景画像を表示するのではなく、1番目から３番目までの<li>に、それぞれ別の画像を適用します。リスト項目の３番目まで、上から順に異なる背景画像を指定するために「:nth-child(n)」セレクタを使用しています。このセレクタは、「:」より前で選択される要素のうち、「()」内の番号の順番に出てくるものだけを選択して、スタイルを適用します。たとえば、セレクタが「.rank li:nth-child()1」であれば<ol class=”rank”>に含まれる<li>のうち、１番目に出てくる要素だけが選択されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプル</title>
<style>
.rank{
margin:0;
padding:0;
}
.rank li{
padding:5px 0 20px 55px;
list-style: none;
background-color: #f30;
line-height: 50px;
}
.rank li:nth-child(1){
background:url(./images/crown1.png) no-repeat;
}
.rank li:nth-child(2){
background:url(./images/crown2.png) no-repeat;
}
.rank li:nth-child(3){
background:url(./images/crown3.png) no-repeat;
}
</style>
</head>
<body>
<h2>今週の人気メニュー</h2>
<ul class="rank">
<li>エビフライ定食</li>
<li>ハンバーグ定食</li>
<li>らーめん</li>
</ul>
</body>
</html>実行結果
