ベストアンサー

リンク先の背景色について

2012/06/25 16:37

a:hoverは一つのhtmlに一つずつしか指定できないのでしょうか？ヘッダーは背景色を変えて、フッターは下線がでるようにしたいんですけど可能ですか？もし可能であれば、方法を教えて欲しいです。 cssで下線を指定しているんですけど、全てのリンクで下線がでてしまいます。

zizi22
お礼率83% (10/12)

HTML
回答数4
ありがとう数3

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/25 23:51 回答No.4

No.3です。　ちょっと説明不足でした。　どこに書かれているかでスタイルを変える場合は、子孫セレクタか子セレクタをつかって指定します。　div.header a{}は<div class="header">内にある、子孫(子供・孫・曾孫・・)のa要素です。div.footerも同様・・　なお、質問のタイトル「リンク先の背景色」でしたら、 <a href="./index.html">トップへ</a>と<a href="./profile">プロフィール</a>で背景色を変えたいなら、 a[href="./index.html"]{background-color:red;} a[href="./profile"]{background-color:yellow;} で背景色を変えます。要素セレクタと言います。

質問者

お礼 2012/06/26 08:26

回答ありがとうございます。とても参考になりました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/25 19:49 回答No.3

　a:hoverだけでなく、:hoverはリンクに限らず使える擬似クラス(詳細度 c=1でclassと同じ)です。　たとえば、HTMLが <body> 　　<div class="header"> 　　　　<div class="nav"> 　　　　　　<ol> 　　　　　　　　<li><a href=""></a></li> 　　　　　　　　<li><a href=""></a></li> 　　　　　　　　<li><a href=""></a></li> 　　　　　　</ol> 　　　　</div> 　　</div> 　　<div class="section"> 　　　　<div class="nav"> 　　　　　　<ol> 　　　　　　　　<li><a href=""></a></li> 　　　　　　　　<li><a href=""></a></li> 　　　　　　　　<li><a href=""></a></li> 　　　　　　</ol> 　　　　</div> 　　</div> 　　<div class="footer"> 　　　　<div class="nav"> 　　　　　　<ol> 　　　　　　　　<li><a href=""></a></li> 　　　　　　　　<li><a href=""></a></li> 　　　　　　　　<li><a href=""></a></li> 　　　　　　</ol> 　　　　</div> 　　</div> </body> のようなHTMLが、あったとします。 a:link{text-decoration:underline;} で、すべての<a href=・・・のa要素に下線がつきます。<a name="***には付きません。 a:hover{text-decoration:none;}でこの下線はhoverのとき消えます。・・・・この二つは詳細度が同じですから、擬似クラスには記載順番があります。(後述) div.header a:link{background-color:yellow;}で、div.header内のすべてのリンクの背景色が黄色になります。(詳細度 0,0,2,2) div.header div.nav a:link{background-color:aqua;}でheader内のナビゲーション内の背景色だけ背景色が水色になります。　もし、これをid(詳細度b=1)で設定してしまうと、ひとつひとつについて、すべてスタイルを指定しなくてはならないため、HTMLはむろん、CSSも煩雑になってしまいます。うまくセレクタを記述して希望する要素に希望するスタイルが適用されるようにしましょう。 ★このカスケーディングの仕組みはCSS(カスケーディングスタイルシート)の名前にあるように、極めて重要な仕組みです。　仕様書にも、セレクタの次、プロパティなどより先に書いてあります。　それを理解しないと、「はい、idをつけましょう」になっちゃいます。　・セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) 　・値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) 　　　・カスケード処理 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade ) (注意)詳細度の計算は、現行(ウェブ標準)のCSS2.1で改定されています。

ログインすると、全ての回答が全文表示されます。

nekomeshi_dep
ベストアンサー率0% (0/1)

2012/06/25 17:01 回答No.2

パーツによって、同じタグでもスタイルを変えたい！ということであれば、<div id="○○○">（○は任意の英数字）でかこって、CSSでid指定するといいと思いますよ。例） //HTML  <div id="header"> <a href="#"> <a href="#"> <a href="#"> </div>  <div id="footer"> <a href="#"> <a href="#"> <a href="#"> </div> //CSS #header a:hover{background-color:#色指定;} #footer a:hover{text-decoration:underline;}

質問者

お礼 2012/06/26 08:14

回答ありがとうございます

ログインすると、全ての回答が全文表示されます。

t_ohta
ベストアンサー率38% (5320/13882)

2012/06/25 16:49 回答No.1

idやclassを使って適用範囲を絞ればできます。 ■CSS .head a:hover { background: red; } ■HTML <div class="head"><a href="hoge.html">りんく</a></div> とか ■CSS a.head:hover { background: red; } ■HTML <a class="head" href="hoge.html">りんく</a> といった感じです。

質問者