同じページ内でリンクのフォントカラーを複数指定する方法

質問

CSSを使ってテキストに「未訪問リンク」「訪問済みリンク」「クリック時」「マウスオーバー時」の各フォントカラーを指定したいのですが、「a:link」等を使うと同じページ内では全て同一のフォントカラーになってしまいます。同じページ内で場所によって違う設定をする方法について教えてください。

回答No.1

steel_gray · ベストアンサー

例）
/* タイプセレクタ + 擬似クラス*/
/* <a>のリンクに関するセレクタ */
a:link{color:#00f;}

/* タイプセレクタ + 子孫セレクタ + 擬似クラス*/
/* <ul>配下にある<a>の…（以下略） */
ul a:link{color:#090;}

/* タイプセレクタ + IDセレクタ + 擬似クラス*/
/* <a id="id1">の…（以下略）*/
a#id1:link{color:#c00;}

/* タイプセレクタ + クラスセレクタ + 擬似クラス*/
/* <a class="c1">の…（以下略）*/
a.c1:link{color:#990;}

<p><a href="http://www.goo.ne.jp/">goo</a></p>
<ul>
<li><a href="http://www.goo.ne.jp/">goo</a></li>
<li><a href="http://www.goo.ne.jp/" id="id1">goo</a></li>
<li><a href="http://www.goo.ne.jp/">goo</a></li>
<li><a href="http://www.goo.ne.jp/" class="c1">goo</a></li>
<li><a href="http://www.goo.ne.jp/" class="c1">goo</a></li>
</ul>

CSSはその適用範囲を指定する方法が色々用意されています。

「セレクタ」というのを調べてみて状況・目的にあった方法を使用してください。

とりあえず「子孫セレクタ、クラスセレクタ、IDセレクタ」の3種類を押さえておけばいいかと思います。
（他のセレクタは実装状況がブラウザによってマチマチだし）

参考URL：

http://hp.vector.co.jp/authors/VA022006/css/selector.html

お礼

ご回答ありがとうございました。セレクタの使い方について概略が理解できました。おかげさまで目的とするソースを書くことができました。さらに詳細は参考URLで勉強してみます。