divクラス内のリンクのCSS設定について

2023/10/15 10:20

このQ&Aのポイント

divクラス内にあるリンクのCSS設定方法について質問させてください。
divクラス内の<a>タグのみをCSSで指定したい状況ですが、どのようにすればよいでしょうか？
divクラスの中にあるリンクのCSS設定に関して、アドバイスをいただけますか？

ベストアンサー

divのクラス内のリンクの設定

2008/04/05 04:52

　CSSの設定でわからない点がありましたので質問させてください。　div自体にクラスを設定しているのですが、このブロック内にリンクがあります。このdivないの<a href="">のみのCSS指定をしたいのですが、どうやってやったらよいのでしょうか？　これまでは、divにidを指定して、 #id a:link {… とか、アンカー自体にクラスを指定してやっていたのですが、ここではHTML自体を変更せずにCSSでコントロールしたいのです。ソース自体はこんな風になっています。 <div class="asset-more-link"> <a href="example.html">バージョンアップ</a>の続きを読む </div> これに対して、あれこれCSSを設定したのですが一向に反応してくれません。もしわかる方がいたらおしえてください。よろしくお願いします。

Tinte
お礼率40% (40/98)

CSS
回答数2
ありがとう数1

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

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

ベストアンサー

steel_gray
ベストアンサー率66% (1052/1578)

2008/04/05 14:24 回答No.2

普通に使うなら .asset-more-link a【:link等】{・・・} こうしているにも関わらず、反映されないなら詳細度の関係で別のスタイルの設定が優先されているのかも。 http://refluxflow.net/2006/08/css_selector_specificity.html#ID160FA309 !importantを付けてみるのも一つの手です。 http://www.xml.vc/kiso/!important.html

質問者

お礼 2008/04/06 21:41

　ありがとうございます。　やっぱり、どこかで別のスタイルシートが優先されているのかもしれません。１つのCSSファイルにかなり冗長に（未整理のまま）書いてしまったのがいけなかった…感じです。　!importantを付けて見事に解決しました。

その他の回答 (1)

auty
ベストアンサー率58% (284/486)

2008/04/05 06:03 回答No.1

様々な方法がありますが、<a>に直接設定することもできます。・　<a>にid属性 #a1をつける。　　　#a1 { text-decoration: none; 　　　 background-color: #0000ee; 　　　 } ・　<a>にclass属性 c1をつける。　　　.c1 { background-color: #00ffee; } ・　<div>の中のclass属性 c1に限定する。　　　div .c1 { background-color: #ff0044; } ・　クラス.asset-more-linkの<a>のhoverに限定する。　　　.asset-more-link a:hover { color: #dddd00; } 可能性は無限にあります。以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>a</title> <style type="text/css">  </style> </head> <body> <div class="asset-more-link"> <a href="example.html">バージョンアップ</a>の続きを読む </div> <div class="asset-more-link"> <a id="a1" href="example.html">バージョンアップ</a>の続きを読む #a1 </div> <div class="asset-more-link"> <a class="c1" href="example.html">バージョンアップ</a>の続きを読む .c1 </div> <p class="asset-more-link"> <a class="c1" href="example.html">バージョンアップ</a>の続きを読む p .c1 </p> <a class="c1" href="example.html">バージョンアップ</a>の続きを読む .c1 <div class="asset-more-link"> <a class="c1" href="example.html">バージョンアップ</a>の続きを読む div .c1 </div> <div class="asset-more-link"> <a class="c1" href="example.html">バージョンアップ</a>の続きを読む .asset-more-link a:link </div> </body> </html>

質問者

補足 2008/04/06 21:42

　HTMLでの変更（classやidの変更）をせずにcssだけで、リンクのスタイルを変更したかったのです。というのは、HTMLを変更するには無数のファイルを変更しなくてはならないからです。　　

関連するQ&A

HTMLのアンカーリンクについて。
HTMLのアンカーリンクについて。アンカーリンクですが、通常どおりリンクをはると、ブラウザ画面の一番上にぴったりくっついたかたちでリンクしてしまします。たしか、リンク先の上の幅を指定できたと思うのですが、やり方を忘れてしました(^^;ゞちなみにHTMLはこんな感じです。 <div id="content"> 　<div id="anchor"> 　　<ul> 　　　<li><a href="post-1">投稿１</a></li> 　　　<li><a href="post-2">投稿２</a></li> 　　　<li><a href="post-3">投稿３</a></li> 　　</ul> 　</div> 　<div id="entry"> 　　<h2 id="post-1">投稿１</h2> 　　<h2 id="post-2">投稿２</h2> 　　<h2 id="post-3">投稿３</h2> 　</div> </div> すこし検索してみましたが見当たらなくて、質問させていただきました。どなたか、おわかりの方ご教授いただけると助かります。よろしくお願いします。
- ベストアンサー
- HTML
div　にリンク
a:hover { 　　　　　　　　background-color: #e0ffff; } div#input { 　　　　　　　　font-size:15px; 　　　　　　　　width:140; 　　　　　　　　border:solid 2px #000000; 　　　　　　　　padding:2px; 　　　　　　　　margin:3px; 　　　　　　　　list-style : none; } <div id="input"><a href="http://～" target="_blank">ＭＡＩＬ</a></div> 中の文字だけにリンクをしているところを、 <a href="http://～" target="_blank"><div id="input">ＭＡＩＬ</div></a> ・・と div 全体にリンクをすると、マウスポインタが変になります。カーソルを合わせた時に指マークになりませんし、色も変化しません。１クリックでリンク先には行けます。どうしてでしょうか？また、通常どうりにはならないのでしょうか？
- ベストアンサー
- HTML
リンクカラーが変わりません。
外部CSSでリンクカラー設定したいのですがうまくできません。最初からvisited設定カラーとなり、visitedはactive設定カラーで表示されてしまいます。（link設定カラーが適用されません。）前回同じような質問をさせていただき、解決したと思ったのですが、作り直しているうちにまた解らなくなってしまいました。ページ自体は問題なくジャンプするのですが、どこが間違っているのでしょうか？よろしくご指導お願い致します。　[site] ├[contents] 　 │　 └ [index] 　 │　　 └ index.html │　　　　　　 └[styles-site.css] 　　　　 └ navi.css index.html <html> <head>　　　　<link href="../../styles-site.css/navi.css" rel="stylesheet" type="text/css"> </head> <body> <div class="navi"> <div><a href="index.html">top</a></div> </div> </body> </html> .navi.css　　　<style type="text/css"> 　　　　
- ベストアンサー
- その他（プログラミング・開発）
リンクを横に並べるには、どうすればいいですか？
リンクを下記のように並べたいのですが、CSSにはなんと記述すればいいでしょうか？　　　リンク1（中央揃え）　　　リンク2（右揃え）なぜか、下記のようになってしまいます。リンク1（中央揃えにしたいのに、左揃え状態）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　リンク2（右揃えになっているけど、改行されてしまう） margineかpaddingで設定するしかないでしょうか？文章が見づらくて、すいません。私が記述したHTML・CSSのソースを下記に載せます。よろしくお願いします。 /*---------- CSS部分（外部スタイルシートに記述） ----------*/ div#inline { display: inline; } div#center { text-align: center; } div#right { text-align: right: } /*---------- HTML部分 ----------*/ <div id="inline"> <div id="center"><a href="～○○">リンク1</a></div> <div id="right"><a href="～○○">リンク2</a></div> </div>
- ベストアンサー
- CSS
JSで動的にリンクを作成
JSで動的にリンクを作成をしたいのですがわかりません。例を教えてもらったのですがどう書いていいのかわかりません…。駄目な例： <div id="link"> <a href="http://aaa.aa/">aaaa</a> </div> いい例 <div id="link"></div> <script> document.getElementByID("link") に対してaddChild </script> いろいろ不足していると思いますがお願いします。
- ベストアンサー
- JavaScript
テキストリンクの色を各クラスの設定を優先させたい
cssの質問です。 h1、h2などのタグや、各クラスのテキストの色をスタイルシートで設定してあります。このうちの一部のテキストにリンクを張ると、当然共通のリンクテキスト色に変わってしまいます。テキストリンクを張っても、hoverで下線を表示させるだけで、各タグやクラスで設定したテキスト色を保持したいのですが、何か指定する方法はないでしょうか。各タグやクラス毎にlink色や下線を指定するしかありませんか？
- ベストアンサー
- HTML
テキストリンクの色を徐々に濃くしたいのですが
初心者の質問です。リンクページを作っています。ページが読まれたら、このテキストリンク色をそれぞれ透明から白100％に徐々に濃くしたいのです。（バックが黒です）（要するにテキストがフェードインする感じにしたいです。）マウスオーバーしたら、とかのサンプルはありますが、ページが開いた時にテキストリンク色が変わるようなものは見当たりませんでした。どのブラウザでもある程度見れるもので（あまり古いバージョンは仕方ないです）よいスクリプトありますでしょうか。どなたかご助言いただけたら助かります。 <html> <body> <div id="content"> <div id="link"> <div id="link1">○○○サイト <p><a href="a.html">● A site</a></p></div> <div id="link2">△△△サイト　　　　　　　　<p><a href="b.html">● B site</a></p></div> <div id="link3">その他<p><a href="c.html">● C site</a></p></div> </div> </div> </body> </html> よろしくお願いいたします。
- ベストアンサー
- JavaScript
DIVの中の<a>について
CSS初心者です。とんちんかんな質問かもしれませんが宜しくお願いします。同じスタイルのDIVボックスを1ページに複数配置するので外部スタイルシートに .abc { } という風にしてDIVボックスにクラスを適用させたのですが、そのDIVボックスの中のある<a>とかを限定してCSSで設定する場合、外部スタイルシートには .abc a { } というような感じで指定してもいいのでしょうか？ DIVをIDで設定した場合は #abc a { } という風にすれば良いと本には書いてあったのですが、DIVにクラスを適用させた場合がわかりませんでした。アホな質問かもしれませんが、宜しくお願いします。
- ベストアンサー
- CSS
擬似クラスの子要素を指定するセレクタ
リンク色を変えるセレクタについて質問です。以下のHTMLがある場合に、abcの文字色を変えるCSSセレクタを a:link { color:blue } ←これ以外で教えて下さい。 <div id="id"> <a href="#"><span>abc</span></a> </div> 以下のCSSでは色が変わりませんでした。 #id a:link { color:pink } #id a:link span { color:pink } #id a:link * { color:pink } （HTML構造は都度変わるため隣接セレクタではなく汎用性のある下位セレクタで指定したいです。）
- ベストアンサー
- CSS
div要素をランダムに表示させたい
お世話になります。Javascriptについて質問させていただきます。拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }
- ベストアンサー
- JavaScript

divクラス内のリンクのCSS設定について

divのクラス内のリンクの設定