おしえて

a要素の色を複数使い分ける方法

締切済

質問者：kyouko
質問日時：2019/07/25 09:48
回答数：4件

一つのページ内に、2種類以上のa要素を設定することはできますか？

ページ内に、他のページにリンクするa要素と
ページ内のセクションにリンクするa要素があって、それぞれの
色を変えたいのですが、

html
<a class="color1" href=・・・>
＜a class="color2" href=・・・>

css
a:link{
font-weight:bold;
}
.color1{
color:#fff;
}
.color2{
color:#000;
}

これではだめでした。

どうすれば、色を変えれるのでしょうか？
どなたか、教えてください。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： kon77
回答日時：2019/08/02 13:14

No.3です。

以下の箇所の、「color1」部分を、「color2」の書き換えるとうまくいくかと思います。

―――――――――――――――――

.color2:link,
.color1:visited{

color:#fff;
}

―――――――――――――――――

- 0
- 件

通報する

No.3

回答者： kon77
回答日時：2019/08/01 15:45

No.1です。

「link」「visited」「hover」だけ色を変えたい場合は、以下のような記述にしてみてください。

――――――――――――

.color1:link,
.color1:visited,
.color1:hover{
color: #fff;
}

.color1:active{
color: blue;
}

――――――――――――

CSSでは、後に書いたものが優先されますので、上記のような記述となります。

「color: blue;」部分がクリック中の文字色です。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
何度もすみません。m__m
教えていただいたソースを参考に

color1は
linkとvisitedは白に、hoverのみオレンジ

color2も
　linkとvisitedは白で、hoverのみ水色
　　　にしてみようと、以下のようにしてみましたが、
　　　うまくいきません。

　color1は
link も visited も hover も白で hover してもオレンジにならず

color2は
　link と visited は紫色で、hover はオレンジになりました。

お忙しいところ申し訳ありません、お時間ありましたら、また教えてください。

.color1:link,
.color1:visited{
color: #fff;
}

.color1:hover{
color:#F60;
}

.color2:link,
.color1:visited{

color:#fff;
}

.color2:hover{
color:#69F;
}

通報する

お礼日時：2019/08/02 10:29

No.2

回答者：暇人の名前
回答日時：2019/07/25 21:50

試しにcolorのプロパティー値をcolor名かrgbで指定してみてはいかがでしょうか？

若しくは疑似要素の後に続けて半角スペース、クラス名として波かっこの中にcolorを指定してみて下さい。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
よく見たら、数字が全角になっていて、それを直したら、
色が変わりました。
ちなみに、「疑似要素の後に続けて半角スペース、クラス名として・・｣で

a:link {color1:#fff}
a:hover{color1:#000}

a:link {color2:#093}
a:hover{color2:#F3C}

としてみましたが、全く違う色になりました。
記述の仕方が違いますか？

通報する

お礼日時：2019/07/30 21:30

No.1

回答者： kon77
回答日時：2019/07/25 12:36

シンプルなHTMLなら、質問文にあるような記述でうまくいくはずです。

例えば、以下のようなHTMLです。

―――――――――――――――――

<html>
<head>
<style>

body{
background:#ccc;
}

a:link{
font-weight:bold;
}

.color1{
color:#fff;
}

.color2{
color:#000;
}

</style>
</head>
<body>

<a class="color1" href="#">他のページ</a>
<a class="color2" href="#">ページ内のセクション</a>

</body>
</html>

―――――――――――――――――

どうしてもうまくいかない場合は、あくまで我流ですが、私は以下のような対処をしています。

―――――――――――――――――

■ 「!important」を付ける

.color1{
color: #fff !important;
}

―――――――――――――――――

■ 擬似クラスも指定する

.color1,
.color1:link,
.color1:visited,
.color1:hover,
.color1:active{
color: #fff;
}

―――――――――――――――――

■ 親要素も記述する
html body .color1{
color: #fff;
}

―――――――――――――――――

■ カラーコードを6桁にする
.color1{
color: #ffffff;
}

―――――――――――――――――

中には意味の無いものもあるかも知れませんが、良ければ一度試してみてください。

又、半角で書くべき所に全角文字が使われていないかもご確認ください。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
ご指摘どおり、数字が全角になっていて、
直したら、色が変わりました。

ところで
.color1,
.color1:link,
.color1:visited,
.color1:hover,
.color1:active{
color: #fff;
}
この場合、color1はすべて#fffになりますが、
color1で、link,visited,hoverの色を変えることは出来ますか？

通報する

お礼日時：2019/07/30 21:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！