• 締切済み

【stylus拡張機能】既リンクに色をつけたい

Chromeでstylusという拡張機能を使って、 既リンクの場合に色をつけたい(CSSを上書きしたい)と思っています。 つけたいのがnoteというページの記事一覧で、HTMLは添付画像のような構造になっています 既リンクとなった際に色をかえたいのは、h3が指定されている「タイトル」の文字の色です。(もし無理なら「本文」) a:visited {color: #FFEEFF !important ;} a:visited h3 {color: #FFEEFF !important ;} a:visited div {color: #FFEEFF !important ;} a:visited div h3 {color: #FFEEFF !important ;} みたいな感じ指定してみたのですが、どの形でも、タイトルの文字色は変わりませんでした。(aタグとh3タグが別の層にあるから?) 他のサイトでは上手くいっているので、stylus自体は正常に動いていると思います。 CSSを理解しておらず、指定の仕方がおかしいからだと思うので、どのように指定したら良いか、分かる方居られましたら教えて頂けますでしょうか。 宜しくお願いいたします。

  • CSS
  • 回答数2
  • ありがとう数4

みんなの回答

回答No.2

>今回のソースの場合は、どのように記載すれば既リンクの色を変えられるでしょうか? そのCSSにあうようにHTMLを書き直すか、 https://webliker.info/css-selector-cheat-sheet/ こんな感じでの、セレクターで一致するパターンを作ればよいかと。 おまけ、Chromeの拡張機能って、単なるJavaScriptなので、 HTMLを書き換える方が慣れると楽ですがね。

hoshio99
質問者

お礼

一旦別の方法を考えてみます。 有難うございました。

hoshio99
質問者

補足

ご回答有難うございます。 教えて頂いたチートシートを見ながら色々試してみたのですが、理解力不足のため上手くいきませんでした。 <div> <a class="link"></a> <div> <div></div> <h3 class="title">タイトル</h3> <p class="main">本文</p> <div></div> </div> </div> のような構造の場合、どのセレクタを使えば良いのでしょうか。

回答No.1

>a:visited div h3 {color: #FFEEFF !important ;} これは、 Aタグの中のDIVの中のh3タグに対して。 なので、書かれてるソースには、階層をもったアンカーが 確認できませんでしたけど。

hoshio99
質問者

お礼

一旦別の方法を考えてみます。 ご回答有難うございました。

hoshio99
質問者

補足

ご回答有難うございます。 >Aタグの中のDIVの中のh3タグに対して。 そうですよね。仰るとおりです。 では、今回のソースの場合は、どのように記載すれば既リンクの色を変えられるでしょうか?

関連するQ&A

  • テキストがaタグの外にある場合のCSS指定方法

    noteというサービスに公開されている記事について、 既に読んだ記事が分かるように既リンクの色を変えたい(a:visited) と思っています。(現状はリンクを踏んでも変わりません。) stylusというCSSのChromeアドオンを使って実現しようとしています。 HTMLの構成を見てみると下記のように、 タイトルと本文がaタグの外にいる状態なのですが、 このような構成で既リンクのタイトル(もしくは本文)の文字色を 変えたい場合はどのようなCSSを記述したら良いでしょうか。 分かる方居られましたら宜しくお願いいたします。 既読が分かるようになれば、stylusを使う以外の方法でも結構なので、 何かやり方知っている方居られたらご教授お願いいたします。 <div> <a class="link"></a> <div></div> <div> <div> ::before <div></div> <h3 class="title">タイトル</h3> <p class="main">本文</p> <div></div> ::after </div> </div> </div>

    • ベストアンサー
    • CSS
  • CSSの質問です。1行にある「●タイトル」を別々の色にしたいです。

    CSSの質問です。1行にある「●タイトル」を別々の色にしたいです。 ●タイトル ↑ ●とタイトルを別々の色にしたいです。 現在のCSSはこうなっています。 div.post h2 {font-size: 0.87em} div.post h2 a {text-decoration: none; color:red} これをどうすれば、別々の色に指定できますか? h3を作ると改行されて、a1というタグは無理っぽいです。 CSSがわからないので、助けてください。

  • css リンクの色が全部変わってしまう。

    1、 css div#link a:link{#ff0000;} div#link a:visited{#999999;} と設定したリンクの行があるとします。 ひとつのリンクをクリックすると、全ての並んでいる、リンクがvisitedの色に変わってしまいます。 原因と直し方を教えてください。 2、 また、firefox(IEもかもしれない)では一度visitedの色になるとブラウザを再起動しても、いつまでもvisitedの色のままです。 これは正常な動作なのでしょうか。 異常である場合の直し方を教えてください。 正常である場合、むやみにlink色とvisited色は違う色にしない方がよろしいということでしょうか。 回答お願いします。

    • ベストアンサー
    • CSS
  • リンクの色を2色で使い分けたい

    はじめまして。 良かったらどなたか教えて下さい。 今、一枚のページを作っているのですが、背景色を"#ffffff"(白)とし、そのリンクを以下の様に指定しました。 <style type="text/css"> <!-- A { text-decoration: none} A:link {color:#000000;} A:visited {color:#ffffff;} A:hover {color:#ff6600;} --> </style> 「白地に黒文字リンク、オンマウス時はオレンジ」という指定です。 ところが、同じページ内でテーブルを組み、その背景を#000000と指定する事になりまして、その中にリンクを入れると、「黒字に黒文字リンク、オンマウス時はオレンジ」 でリンクの文字が見えなくなってしまいます。 hoverの効果(オンマウス時はオレンジ)の効果を残しつつ、リンク色を二色に分ける方法は無いでしょうか? (クラス指定の使い方がよく判ってないので、自分で指定するとエラーしか出ないのです)。 お忙しい所申し訳ございませんが、宜しくお願い致します。

    • ベストアンサー
    • HTML
  • CSSでテキストリンクの色を複数指定したいのですが・・・

    はじめまして。 CSS勉強中なんですが、今CSSで作ったホームページでわからないことがあります。 テキストリンクの色をa:linkという直接タグにCSSを指定して統一しているんですが、なんとかしてそれぞれの場所にあったテキストリンクの色に指定できないものでしょうか? できればそれぞれを配置してある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"> <!-- .navi div { float:left; width:45px; text-align:center; } a:link { color:#ff9933 } a:visited { color:#cccccc } a:active { color:#0000f5 } a:hover { color:#009700 } -->      

  • CSSでのリンク色の優先順位を教えて。

    <div class="t1"> <div class="t2"> aaa </div> </div> .t2 {color:orange;} .t1 {color:green;} 上記の様なプログラムの場合は、「aaa」はオレンジ色になります。 <div class="t1"> <div class="t2"> <a href="#">aaa</a> </div> </div> .t2 a{color:orange;} .t1 a{color:green;} 上記の様に、<a>タグでリンクをつけた場合は、「aaa」は緑色になります。 リンクの無い文字列の場合は、内側のclassが優先される。 リンクが有る文字列の場合は、CSSで下に記述した方が優先される。 この様な解釈で良いですか? http://creativememomemo.com/css_a_link_color/ 上記のサイトの内容は大体理解しています。 しかし、上記のサイトの結論では、内側のclassが優先になる様に思います。 私のどこに勘違いがあるのでしょうか?

    • 締切済み
    • CSS
  • CSSでのリンク色の変更で

    HPのリンク色(a:link)の色をa:link{color:#ffffff;}(色は例です)で変えたんですが、 何故か色が反映されず、デフォルトの青色で表示されてしまいます。 ・hover、active、visitedも同じように変更しているが、そっちは反映されている ・リンクの色を変えようとするページにcss(仮にAとB)ファイルを2つ使っている ・Aではリンクに関する設定は記述してない。またAを省いても変わらない ・Bのリンク以外の指定を消しても同じ ・そもそも青色で設定している文字がない ・HTML文にも色変えの記述はない ・ブラウザ指定もしていない 何度自分で見直しても全く分からないのでお願いします

    • ベストアンサー
    • HTML
  • リンクのカラー

    教えてください。 リンク部の文字の色を変えようとすると、擬似クラスをつかって、次のようなコードで実現できるところまでは、わかります。 -----html----- <p class="sample"><a href="a.html">リンク</a></p> -----css----- .sample a:link { color: #FF0000; } ここで、<p>タグを使うと改行されてしまうため、<span>等の改行が入らないタグでリンク文字の色指定をしたいのですが、上手くいきません。 <span>じゃなくても良いのですが、改行が入らない、リンク文字の色指定の方法があれば、教えてください。

    • ベストアンサー
    • HTML
  • 訪問済みリンク色を設定したいが難易度高いです

    以下のHTMLのハイパーリンクになってる文字列に対し、「訪問済みリンク色(a:visited)」だけ新たに設定したいです。 現在はすべて文字色は赤で、訪問済みリンクであっても色は赤のままです。それを訪問済みリンクなら青になるようにしたいです。 ブラウザの設定で変更する方法ではなく、CSSで変更したいです。 <body>タグの中は「一切いじれない状態」なので、<body>の外部に新たにcssを書き、そこから色を変更したいですが、ハイパーリンクの文字列は、タグの挟まれ方の種類が以下のとおり(5)種類あります・・・ <a>タグは、<a href="http://*" class="title">と<a href="http://*"> の(2)種類、 他にも<span>や<strong>の位置が違ってたりしますが、<body>の中はいじらずに訪問済みリンク色だけ変更することは可能でしょうか? <body> <div class="blogbody"> <div class="text"> ■文字列(1) <li><span style="color: red"><a href="http://*"><strong><span style="color: red">文字列(1)</span></strong></a><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(2) <li><a href="http://*" class="title"><strong><span style="color: red">文字列(2)</span></strong></a>DATE</li> ■文字列(3) <li><a href="http://*" class="title"><span style="color: red"><strong>文字列(3)</strong></span></a><span style="color: red"><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(4) <li><a href="http://*"><span style="color: red"><strong>文字列(4)</strong></span></a><span style="color: red"><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(5) <li><a href="http://*"><strong><span style="color: red">文字列(5)</span></strong></a>DATE</li> </div> </div> </body>

    • ベストアンサー
    • HTML

専門家に質問してみよう