CSSについてです。回答よろしくお願いします！

質問

現在外部リンクでCSSを使っているのですが、リンク設定を

a:hover {text-decoration: none; color: #1E90FF; position: relative; top:2px; left:0px;}

という風に使っています。

しかし、同じページにリンクを２つ作ると上記内容に２つともなってしまいます。

１つだけ上記内容のリンク設定にしたいのですが、どうすればよろしいでしょうか？

質問の内容がわからないようでしたら、説明しますので、回答よろしくお願いします。

回答No.1

mitoneko · ベストアンサー

特定のリンクにだけa:hoverを適用したいのでしたら、ＩＤセレクターを。複数のリンクに適用したいのでしたらクラスセレクターを利用すればよいでしょう。
　各々事例を挙げると・・・

/* 一つだけなら */
a#koredake:hover {text-decoration: none; color: #1E90FF; position: relative; top:2px; left:0px;}

/*複数なら*/
a.fukusuu:hover {text-decoration: none; color: #1E90FF; position: relative; top:2px; left:0px;}

としておいて、html側では
<a id="koredake" href="kokonitobu.html">・・・・</a>
<a class="fukusuu" href="kokonitobu.html">・・・・・</a>
とやります。
これで、idまたはクラスを指定したところのaタグの設定のみにＣＳＳの設定を限定することができますし、いくつも作れば同じページ内に多数の設定を混在させることが可能です。
　ほかにも、子セレクターや子孫セレクターで限定することも可能ですし、方法は多数ありますが、難しいので省略します。興味があるようでしたら、ＣＳＳの「セレクター」に関して調べてみてください。

お礼

世界一わかりやすい解説ありがとうございます！

素晴らしいです。

ダヴィンチコードをレイトショーで見に行ってたため返信おくれてすみませんでした。

20ポイントでは無く100ポイント差し上げたいくらい分かりやすかったです。

ありがとうございました。