HTMLとCSSでのClass属性がわかりません

質問

画像を挿入し、リンクを埋め込むと、画像の周りに線がついてしまう。
これを避けたいのですが・・・・

具体的に言いますと・・・各ページに「ＴＯＰページ」へ戻るボタンを埋め込みます
各ページのＨＴＭＬに

<div class="icon">
<a href="リンク先"><img src="パス名"></a>
</div>

ＣＳＳに
img.icon{
border-style: none;
}

と記述しましたが、各ページの画像（「ＴＯＰページ」へ戻るボタン）の周りは線がついたままです

ＨＴＭＬの＜img src="パス名" border="0"＞を記述すれば、線を消すことは出来ますが
複数ページに渡っているため、全てにborder=”0”を入力するのは
手間がかかってしまいます

なんとかCSSでコントロールしたいのですが・・・
そもそも記述（文法）が間違っているのでしょうか？

Classのとらえ方が間違っているのでしょうか？
画像も一気に変えたい場合の事も想定し、
現在HTMLで画像挿入しているのを、CSSで埋め込む記述方法があれば
教えてください。

数日前から、HTMLとCSSの勉強をはじめた初心者ですので
見当違いな質問かもしれませんが
どうぞ、よろしくお願いします

回答No.2

kosukejlampnet · ベストアンサー

記述が間違っています。

img.icon ＝＞iconというクラスが設定されているimg　を意味しています。
ですので、　.icon img と書けばiconというクラスが設定されている何らかのタグの中にあるimgを指します。

imgであればどの場合でもborderを表示したくないのであれば、
img { border:none; }だけで十分です。

補足

img.icon ＝＞iconというクラスが設定されているimg　を意味しています
↑　スミマセン・・・初心者で、意味がわかりません（汗

例えば・・・
<div class="icon">
<a href="リンク先A"><img src="画像A"></a>
<a href="リンク先B"><img src="画像B"></a>
</div>

<a href="リンク先C"><img src="画像C"></a>

とした場合、<div>~</div>で囲まれているセレクタないの
img要素の属性をコントロール出来ると思っていたのですが・・・・
（画像A,Bのみに適用し、画像Cは対象外）

根本的に理解の仕方が間違ってるのでしょうか？
すみません。もう少し、手を貸してください。

回答No.4

ORUKA1951

<div class="icon">
<a href="リンク先"><img src="パス名"></a>
</div>

まず、リンクのある画像にのみ枠線を消したいわけですから、
a:link img{border:none;}
で良いです。通常はユーザービリティのため、他の画像のボーダーは消さないほうがよければ、div.icon a:link img{border:none;}となります。
　このセレクタは、次のような意味です。
1) classの(空白で仕切られた)値のリストのひとつにiconという文字列を含む汎用ブロックの子孫にある、
2) リンクの始点であるａ要素の子孫の
3) img要素
には、枠線をつけない

　ページ内のすべてのリンクのある画像に枠をつけないなら、a:link img{border:none;}でよいです。a img{border:none;}でもよい。

　なぜ、HTMLの要素<img src="" border="1">と書かれていても、それで枠がつかないかも知っておきましょう。
★ブラウザ(ユーザーエージェント)がもっているスタイルシートをしらべる
★HTMLの要素に【属性として】書かれた枠線指定border=1などは、詳細度(selector's specificity)をゼロとし、すべての宣言の前に書かれているとみなす。
★外部スタイルシート→ヘッダ内のスタイルシートと並べ替える。
★重要度important!をしらべる
★詳細度が同じなら後から出たものを優先する。
a img{border:none;}の詳細度は[0,0,0,2]
a:link img{border:none;}の詳細度は[0,0,1,2]:linkはリンクに関する擬似クラス
div.icon a:link img{border:none;}の詳細度は[0,0,1,3]
<img style="border:none;">なら詳細度は[1,0,0,0]

★このカスケーディング処理はCSS(カスケーディングスタイルシート)の最も重要な仕組みですから、CSSを使うなら最初に覚えておくべきです。そうすると無駄なidやclass名を使わず、しかも意図した要素にスタイルが適用できます。
→6.4 カスケード処理 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade )CSS2 の邦訳
→6.4 The cascade ( http://www.w3.org/TR/CSS2/cascade.html#cascade ) CSS2.1
　注意)詳細度の計算はCSS2.1で変更されています。CSS2.1がウェブ標準

[参考]
これが、HTMLのheader部分にあるならHTMLが
<div class="header">
　<h1>見出し</h2>
　<p><a href="[URL]"><img></p>
だけでよい。無駄なものを書かない
div.header p a:link img{}でよい。

回答No.3

kosukejlampnet

補足に書いてあることをしたいのであれば、セレクタを

.icon img {
}

とすればいいですよ。

回答No.1

noname#158634

CSSのセレクタは「その要素」に作用します。
「class=icon」がついているのは？<div>であって<img>ではないですよね？でも線を消したい要素は<div>ではないですよね？そういうことです。

お礼

<div>セレクタにClass名を付けてしまってたという単純なミス？なんですね～
初心者なので、イマイチ理解出来てないですが・・・
ちょっと頑張ってみます。
ありがとうございました