外部cssについて教えて下さい。

質問

外部cssでside a{　}とside a:hover{　}の設定をしてサイドボタンを作成しました。background-imageの設定を両方あててます。
css
#side a{ background-image: ・・・
#side a:hover { background-image:・・・

htmlの方でバナーを作成し、サイドボタンの下にバナーを表示し、とあるサイトへのリンクをさせたくて作っていたのですが・・・

html
<div id="side">
<ul><li id 1.2.3.4.5>
サイド設定
</li></ul>
</br><a href="http://"><img src="バナー"></a>
</div>
ここで問題が・・・・
a の設定をサイドボタンで使ってるために<a href>のバナーまでサイドボタンの枠やイメージになってしまい困っています。
対象法や良い案があればご指導お願いします。

回答No.1

naokita · ベストアンサー

htmlの例が変ですが、（それはさておき）

<div id="side">
<ul>
<li><a href="#">ボタン１</a></li>
<li><a href="#">ボタン２</a></li>
<li><a href="#">ボタン３</a></li>
</ul>
<p><a href="#"><img src="" alt="バナー"></a></p>
</div>

#side a　というのは、
<div id="side">の中のアンカー全てって事だから当然の結果・・・
ボタン？というのが、
上記の様な <ul><li><a> だとすると、
#side の中の ul の中の li の中のアンカーだけを
限定してボタン化すれば良いので、
#side ul li a{ background-image: ・・・
#side ul li a:hover{ background-image:・・・

もしくは、<p>で囲ったアンカーを除外設定は、
<p><a href="#"><img src="" alt="バナー"></a></p>
#side p a{ background-image: none !important;}

特定のアンカーをだけを除外設定するなら、
<a href="#" class="example"> として、クラスを割り当てれば良い。
#side a.example{ background-image: none;}

お礼

素早いお返事ありがとうございます。
htmlの表記はすぐに答えが知りたくてあせってタイプした結果でした＾＾；
12345個のnaviを書こうとしたのですが質問とhtmlの関連がないため直さずに進めてしまいました。
わかりずらいですよね＞＜＞すいません。

外部cssだけをいじればいいのでアンカーの特定を使いました。
ありがとうございます。寝るまでに終わらせたかったので本当に助かりました。

他の設定方法も勉強になりました。関係ないですが新たに作って試してみます。