クラス属性？

質問

CSSの外部呼出しで、
A:link { color: #0033cc; }
A:visited { color: #0033cc; }
A:active { color : red; }
上記をdivでまとめたいのですが、記述の仕方がわかりません。

そしてもう１パターン
A:link { color: #FFFFFF; }
A:visited { color: #FFFFFF; }
A:active { color : red; }
というものもdivでまとめて、外部呼出しのCSSファイルに記述したいのですが、可能でしょうか？

回答No.1

BLUEPIXY · ベストアンサー

例えば
<div class="pt1">～</div>
に含まれるA要素のスタイルは
div.pt1 A:link { color: #0033cc; }
div.pt1 A:visited { color: #0033cc; }
div.pt1 A:active { color : red; }
の様に書けば良いです。

お礼

回答ありがとうございます。

div.pt1 A:link { color: #0033cc; text-decoration:none; }
div.pt1 A:visited { color: #0033cc; text-decoration:none; }
div.pt1 A:active { color : red; text-decoration:none; }

div.pt2 A:link { color: #FFFFFF; text-decoration:none; }
div.pt2 A:visited { color: #FFFFFF; text-decoration:none; }
div.pt2 A:active { color : red; text-decoration:none; }

と記述してみたのですが、pt2を先に記述すると<div class="pt2">～</div>の部分は表示されるんですが、それ以降のpt1が表示されません…。
記述ミスかなにかでしょうか？

回答No.3

nuishi

>やはり記述ミスかなにかでしょうか？
ソースを見てみたんですが、
<div class="pt2">
～
<div class="pt1">
～
</div>
となっており、閉じタグ</div>が足りていません。そのためこの範囲すべてにクラス"pt2"の属性が適用されています。

<div class="pt2">
～
</div>
<div class="pt1">
～
</div>
となるように修正すれば意図したとおりに表示されると思いますよ。

回答No.2

BLUEPIXY

>それ以降のpt1が表示されません…。
当方で試してみたところ(IE,FireFox)では
pt2を先に記述しても同じ動作（問題なし）でした。
多分なんらかのミス（勘違い）だと思いますが、
与えられた情報ではわかりません

お礼

そうでしたか…。

http://standard-spirits.com/test2.htm
一応私が作くろうとしているものです。

やはり記述ミスかなにかでしょうか？