画像リンクのデザイン

質問

HP製作で悩んでいます。

ページ全体のデザインをcssファイルに記述し、その中にa要素のデザインも記述しました。
そのcssを外部参照しているので勿論全ページのa要素にそのデザインが反映されます。
画像でリンクしてる部分もあるんですが、そこにまで反映されていて困っています。

画像でリンクしている部分のa要素だけを別のデザインにしたいですが可能でしょうか？

回答No.2

ORUKA1951 · ベストアンサー

色々な方法がありますが、

a要素内の画像ですから、
子孫セレクタで
　a img{ border:none;text-decoration:none;}
とかですみます。

　逆に、a要素のデザインを特定の要素内のものに限定するなら
ol.navi li a{ デザイン }
としておけば、それ以外のa要素はデザインされません。
　子孫セレクタ、詳細度をよく検討してデザインしましょう。それで、無駄なclassやidは不要になる。

お礼

回答ありがとうございます。
classを記述せず、子孫セレクタだけでも大丈夫なんですね。

大変参考になりました。

回答No.4

noname#100277

>>画像でリンクしている部分のa要素だけを別のデザインにしたいですが可能でしょうか？

一番簡単な方法は以下のタグにスタイルシートを「直接」記述。

<a href="" title=""><img src="" alt="" title="" width="" height=""></a>
aとimg個別だと確実でしょう。

外部なら「imglink」等と解り易いセレクタで指定すれば良いでしょう。
どんな表示にするかは不明ですが。

お礼

回答ありがとうございます。
HTMLタグに直接記述するという手段もあるんですね。

回答No.3

noname#83877

a {
border:1px solid brue;
}

<a href="#"><img src="#" alt=""></a>

などのように指定されていると思うのですが、今のところ子要素によってcssの指定を変えることは無理です。
イレギュラーな指定をしたい時(今回の場合は画像がa要素の中に入る時)は素直にa要素にclassを指定するのが良いと思います。

お礼

回答ありがとうございます。
そうです、上記のように記述していました。
やはりa要素にclassを指定するのが一的な手段のようですね。

回答No.1

askaaska

普通にできるわよ。
<img>を囲っている<a>にclassをつけて
例えばimaとかね。
あとは
ima:link{～}
みたいに指定すればいいのよ。

お礼

回答ありがとうございます。
a要素にclassを記述すれば良かったんですね。