アンカータグのスタイルシート指定

質問

どうも、スタイルシートを書く上で困っていることがありまして質問します。

スタイルシートにおいてa,a:link,a:visited,a:activeといった属性でアンカーの装飾ができると思いますが、今回これで困ったことになりました。
「黒い背景では白い文字のリンクを、白い背景には黒い文字のリンクを」、という形を1つのページ上で行う必要がありスタイルを書いてみたのですがなかなかうまくいきません。
それぞれfontタグで指定すれば色は変わったもののtextdecoration:noneを使用したいためそれでは解決になりません。

どなたかよろしくお願いします。

回答No.1

elttac · ベストアンサー

class 属性を使って同時に絞り込んでください。

　たとえば，「黒背景の部分」は class 属性が blackbg である div 要素，「白背景の部分」は class 属性が whitebg である div 要素として記述されているとします。つまり，

<div class="blackbg">
<!-- 黒背景の部分 -->
</div>
<div class="whitebg">
<!-- 白背景の部分 -->
</div>

のようになっているとします。ただし，黒背景と白背景の部分は必ずしも div 要素で分ける必要はありません。

　スタイルシート側は次のようになるはずです。

div.blackbg {
background: #000;
/* …その他の指定… */
}
div.whitebg {
background: #FFF;
/* …その他の指定… */
}

この中の a 要素それぞれに，スタイルを適用させればよいのですから，

div.blackbg a:link {
color: #FFF;
/* …その他の指定… */
}
div.whitebg a:link {
color: #000;
/* …その他の指定… */
}

これを，a:visited，a:active，a:hover などについても指定すればよいでしょう。

　以上，お試しください。

お礼

詳細な解説ありがとうございました！
無事できました！