リスト項目の先頭の記号を画像に変更し、かつ、

それぞれの項目ごとに画像を変える方法を探しています。

つまり、

<div class="rcmd">
<ul>
<li class="time">3月31日まで</li>
<li class="years">100才まで</li>
</ul>

のようにして、

.rcmd ul {
line-height: 1.5em;
list-style: none;
}
.rcmd li {
padding-left: 15px;
background-image: url(../image/time.gif);
background-repeat: no-repeat;
background-position: left center;
}

とすると、先頭の記号が画像に変わるのですが、

.rcmd li .time {
background-image: url(../image/time.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 15px;
}
.rcmd li .years {
background-image: url(../image/years.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 15px;
}

としても、それぞれの項目画像に変更されません。

これは、リスト項目に使える画像は一つだけ、ということでしょうか?

その場合、どのようにしたら、
「各項目の先頭に、それぞれの画像を与える」ということが可能でしょうか?

出来れば、CSSで一括で実現したいのです。。。
よろしくお願いします!!

回答の条件
  • 1人2回まで
  • 登録:2008/01/14 17:07:32
  • 終了:2008/01/14 17:37:32

回答(2件)

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812008/01/14 17:25:14

ポイント35pt
.rcmd li.time /* li のあとのスペースを削除 */

では?

id:tatami575

ああああああああ

出来ました!!!!!!

どこに半角開けるかとか、イマイチ分かっていなかったです、、、

ありがとうございました!!

2008/01/14 17:36:32
id:Mars No.2

Mars回答回数203ベストアンサー獲得回数202008/01/14 17:26:54

ポイント35pt

.rcmd li .time

↓ liと.timeの間はスペース無しが正解。

.rcmd li.time

スペースを空けると、

class="rcmd" の配下の li の配下の class="time" となります。

↓こういうケースを現している事になってしまいます。

<ul class="rcmd">
<li><XXX class="time">
id:tatami575

なるほど~。すごい勉強になります。

ありがとうございました!!

2008/01/14 17:37:14

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません