- ベストアンサー
CSS, リンクの色を一部変えるには？
全体にこちらを指定してまして a { text-decoration: none; color: #0099ff; } a:hover { text-decoration: none; color: pink; } 一部だけ緑色にしたいのですが .green a { text-decoration: none; color: green; } .green a:hover { text-decoration: none; color: black; } <a href="http://www.google.co.jp" class="green">Google</a> こうすると変わりません。。。 どなたかご存知でしょうか？
- yasu182
- お礼率53% (149/277)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ある程度の範囲を対象にするなら#1さんの回答のように class付きの要素で加工と便利。 質問のようにアンカーにclassを付けて区別するなら a.green {～} a.green:hover {～} と、します。
その他の回答 (1)
- asahina02
- ベストアンサー率47% (95/202)
<span class="green"> <a href="">xxx</a> </span> .green a { text-decoration: none; color: green; } これの意味は greenというclassが設定されたタグの中にある a のスタイル ってな感じの意味になるかと
お礼
.green a と a .green が違うとは勉強になりました。 ありがとうございます！！
関連するQ&A
- リンクの色について
スタイルシート部分を .navi1 a:link, .navi1 a:visited{ display:block; background-image:url(images/1.gif); text-decoration:none; line-height:30px; font-size:12px; text-align:left; height: 30px; padding-left:11px; font-weight: bold; color: #00FF00; } .navi1 a:hover, {text-decoration:none; color:#FFFF00;} .top a:link, .rank a:visited{ color:#379E02; } .top a:hover{ color: #FF0066;} HTML部分を <div class="navi1"><a href="#">テキスト１</a></div> <div class="top"><a href="#">テキスト２</a></div> とした時に、IEでは思ったように表示されるのですが FirefoxやChromeではテキスト１は#00FF00のままマウスを乗せても色が変わらず テキスト２は色が紫になっています。 これをIEと同じ様に表示させるにはどうすればいいのでしょうか？
- ベストアンサー
- HTML
- 文章によって違うリンクカラーの指定をするには
同じページ内で文章によって違うリンクカラーの指定はできるのでしょうか？ 現在外部のCSSファイル内において下記の指定をしています。 a:link { color: #000000; text-decoration: none} a:active { color: #FF0000; text-decoration: none} a:visited { color: #000000; text-decoration: none} a:hover { color: #FF0000; text-decoration: none} これを文章によっては、a:linkとa:visited の色を別の色にしたいのですが、どのような方法がありますか？IDやclass指定を使えば可能なのでしょうか？アドバイスおねがいいたします。
- ベストアンサー
- HTML
- CSSの添削をお願いします。リンク色が反映しません
閲覧ありがとうございます。下記CSSの 「.CLASS li a:link,a:visited{ color:red; text-decoration:none;」 の部分が反映されず、ブラウザの標準設定のままになってしまいます。 本来のstyleの全文はbodyや他のクラスの記述もしているのですが、それらが影響しているわけではないことを確認してあります。 <style> .CLASS ul{ padding:0; } .CLASS li{ border-top: solid pink 1px; list-style-type: none; } .CLASS li a:link,a:visited{ color:red; text-decoration:none; background-color:lightgray; display: block; } .CLASS li a:hover { background-color:gray; } </style> <div class="CLASS"> <ul> <li> <a href=""> 反映されてない…リンク文字色red、デコレーションnone</a> </li> <li> <a href="">反映されてる…リンク背景色lightgray、ホバー背景色gray</a> </li> </ul> </div> 宜しくお願いします
- 締切済み
- CSS
- リンクを張った文字列の色
次のようにするとlink、hover、active、viewedのそれぞれの場合に「リンク先のページのタイトル」の文字列の色がgreen、#ffdddd、#ffffdd、maroonになると思ったのですが、うまくいきません。maroonのままです。 <html> <head> <style type="text/css"> <!-- table {font-size:12px; } a.x:link {color:green; text-decoration:none; } a.x:hover {color:#ffdddd; } a.x:active {color:#ffffdd; } a.x:visited {color:maroon; } --> </style> </head> <body> <table border="0" width="100%" height="400" text="bold"> <tr><td><a href="http://www......html" class="x" target="_blank">リンク先のページのタイトル</a>/td></tr> </table> </body> </html> よろしくお願いします。
- ベストアンサー
- HTML
- CSSについて
カーソルがルンク先文字にふれた時に色が変わり、 リンクしたあとリンク済みになるCSS( スタイルシート)はこれでいいでしょうか？ リンク済みの色が変わりません。 <!-- <style type="text/css"> --><!--A:HOVER{position : relative;top:2px; left:2px;} </style> --> <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style>
- ベストアンサー
- HTML
- プログラミング html css css3
プログラミングについての質問です a{text-decoration:none;} a:hover {color:white; background:black;} a:visited{color:red;} a:active{color:silver;} このプログラム（スタイルシート）のhoverの部分が うまくいきません。 何を直せばいいでしょうか
- ベストアンサー
- CSS
- ｃｓｓ で一部のハイパーリンクの色を変えたい
デフォルトでは 27595a というカラーで各リンクに対してハイパーリンクを貼り、Title という ID 内のみハイパーリンクに触れた時やハイパーリンクそのものの色を白にしたい場合、どのように css を書けばいいいですか？ 色々やってみたのですが、うまくいきません。 ご教授よろしくお願い致します。 <style type+"text/css"> a:link { text-decoration: none; color: #27595a; font-family: "メイリオ","Meiryo","Tahoma","Courier New"; } a:visited { text-decoration: none; color: #27595a; font-family: "メイリオ","Meiryo","Tahoma","Courier New"; } a:active { text-decoration: none; color: #27595a; font-family: "メイリオ","Meiryo","Tahoma","Courier New"; } a:hover { text-decoration: none; color: #27595a; font-family: "Tahoma","メイリオ","Meiryo","Courier New"; } </style> <div id="Title"><a href="./" target="_top">Toppage</a></div>
- ベストアンサー
- HTML
- ｃｓｓの外部ファイルでのリンクの装飾
学校の課題で今ＨＰを作っています。 外部ファイルでリンクの装飾をしようとしているのですが、 検索してもＨＥＡＤ内に組み込むタイプのタグしか出てきませんでした。 <Style Type="text/css"> <!-- A:link { text-decoration:none; color:#000080; } A:visited { text-decoration:none; color:#000080; } A:active { text-decoration:underline; color:#000080; } A:hover { text-decoration:underline; color:#1e78ff; } //--> </Style> ↑このようなものを外部ファイルの場合はどう書けばいいのでしょうか？ つまり↑の内容（リンクの装飾）を↓のような形式に書き換えたいということです。 #title{ font-size:24px; font-weight:bolder; font-family:Arial; } わかりづらくて申し訳ありませんが、どなたか詳しい方いましたらよろしくお願いします★
- ベストアンサー
- HTML
- 外部CSSの読み込みがうまくできない
<head>～ <link href="basic.css" rel="stylesheet" type="text/css"> ～</head> ↓basic.css body{font-size:80%;color:#4a4a4a;} a:link{color:#004a95;text-decoration:none;} a:visited{color:#950095;text-decoration:none;} a:hover{color:#ff80c0;text-decoration:none;} という感じで外部CSSを読み込んでいるのですが、 ブラウザのoperaやfirefoxだとbody{font-size:80%;color:#4a4a4a;}の所だけ反映されません。 IEだとその部分も反映されます。 cssファイルに修正箇所があるのでしょうか？ それとも外部cssを読み込むhtmlファイルの方に追加して記述しなければいけないタグがあるのでしょうか？
- ベストアンサー
- CSS
- 次のスタイルシートにおいて
<style type="text/css"> <!-- a:link { color:#333333;text-decoration:none; } a:visited { color:#333333;text-decoration:none; } a:active { color:#ff0000;text-decoration:none; } a:hover { color:#ff0000;text-decoration:none; } --> </style> a:linkなどがA:linkになっているものを見かけますがaを小文字で書くよりも大文字で書くほうが望ましいのでしょうか？ 特にxhtml1.1の観点から教えてください
- ベストアンサー
- Flash
お礼
うまくいきました。 知ってみると簡単ですね！ ありがとうございました！！