CSSで、サイト共通のリンクのカラー設定をしても、画像のリンクまで反映させないように出来ないでしょうか？

質問

CSSで、サイト共通のリンクのカラー設定をしました。

しかし、このままだとテキストリンクだけでなく、画像リンクまでも
このリンク設定が反映れてしまうので、これを回避したい、
つまり「画像リンクだけは例外」と記述する術がないものかと以前から探しておりますが、
このようなことはできないでしょうか。

回答No.3

leap_day

こんにちは

なるほど<a>要素にborderをつけているのですね

リンク群(複数のリンク)がセットになっている(全て画像リンク)のであれば

.link a { border:none; }

<div class="link">
<a><img></a>
<a><img></a>
</div>

ということはできますが

＞そうなるリンク画像と、そうならないリンク画像があります
ちょっとよく分からないですが<img>に対してfloatやposition:absoluteしていると出ないようではありますが・・・

お礼

何度も本当にありがとうございます。

img {
float:left;
}

と、

img {
position:absolute;
}

と、

img {
float:left;
position:absolute;
}

ともにやってみました。
確かにラインは消えて、おおっ！　と思ったのですが、画像という画像の配置がみなずれてしまいました。
うぅ～む残念・・・

ともあれありがとうございましたm(_ _)m

回答No.2

goldfox

画像リンクのa要素にclass指定をして、そのclassセレクタに対し指定するしかないです。
a:link {～
a img { border:none; }

a:link {～} は、a要素そのものに指定をしていますが、
a img {～} は、a要素「の中のimg要素」に対する指定なので、上書きされません。

お礼

ありがとうございます。

ふぅ～む・・・そうですか・・・
画像リンクのa要素にひとつひとつ指定するしかないですか・・・
これも手間ですね・・・

画像リンクの作業をとるか、それともテキストリンクの作業をとるか、
ということになるかぁ・・・

どうもありがとうございましたm(_ _)m

回答No.1

leap_day

こんにちは

画像周りの縁のことですか？

img { border:none; }

とか

a img { border:none; }

のことですかね？
上が画像全部に対して、下がリンク内の画像のみに対して

お礼

いつもありがとうございますm(_ _)m

説明が足らず済みません。
サイト全体にまず反映させたいリンクの決まりをCSSに記述して、
何の指定も無いリンクは全てこの設定になるようにすれば、
いちいちHTML側でclass設定をしないで良いので効率的であると思いまして。
ところがここで以前から問題視していたことがあって、実践できないでいました。

それは、リンク設定をunderlineにしたり、border-bottomを使ってアンダーラインだけ別色にしたりした際だけだと思うのですが、
フォントに対して設定したつもりのこの設定が、テキストでなく、画像でリンクをつくっているところにも反映されてしまうことです。

GlobalNavigationの画像ボタンも当然リンクなわけですが、これらの画像の下部にborder-bottomのライン色が横いちに出ちゃったりするんです。
厳密に言うと、そうなるリンク画像と、そうならないリンク画像があります。どこで線引きされてるのかさっぱりわかりませんが・・・

例えば以下のように全体設定にした場合に起こります。
imgタグだけはこの全体リンク設定を除外するような記述方法がないものかと思いまして。

a img { border:none; }

ではできませんでした。

/*--------------------------------------------------------
Font Link
--------------------------------------------------------*/
a:link {
color: #0f9088;
text-decoration: none;
border-bottom: 1px solid #ff0033;
}

a:visited {
color: #0f9088;
text-decoration: none;
border-bottom: 1px solid #ff0033;
}

a:hover {
color: #ff0033;
text-decoration: none;
border-bottom: 0px;
}

a:active {
color: #00ab98;
text-decoration: none;
border-bottom: 1px solid #ff0033;
margin-bottom: 0px;
}

補足

済みません、追記です。

------------------------------------------------------------
a:img {
border:none;
border-bottom: 0px; /* またはnone */
}
※以下、先ほどのリンク設定
------------------------------------------------------------

とやってもみましたが、やはりborder-bottomの赤ラインが、
『出る画像ボタンには出て、出ない画像ボタンには変わらず出ない』
という状況です。