人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

リスト項目の先頭の記号を画像に変更し、かつ、
それぞれの項目ごとに画像を変える方法を探しています。

つまり、

<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で一括で実現したいのです。。。
よろしくお願いします!!

●質問者: tatami575
●カテゴリ:ウェブ制作
✍キーワード:3月31日 background-image background-position background-repeat CSS
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

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

では?

◎質問者からの返答

ああああああああ

出来ました!!!!!!

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

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


2 ● Mars
●35ポイント

.rcmd li .time

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

.rcmd li.time

スペースを空けると、

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

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

<ul class="rcmd">
<li><XXX class="time">
◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ