テキストが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>

回答No.1

4017B · ベストアンサー

note.com の場合、記事一覧などに表示されるリンク文字の色は、それを直接囲んでいる aタグでは無く、別途に独立した h3タグの中に記述された文字列が擬似的に表示される仕様になっているので。

<section>
<div><a href="/foo.html" class="a-link"></a></div>
<div><h3 class="m-noteBody__title">記事タイトル</h3></div>
</section>

～こんな感じになっているため。CSSなどでいくら a:visited の設定を駆使しても記事タイトル部分の文字色には全く変化が及ばない様なHTML構造になっています。CSSの基本仕様の原理原則として「入れ子構造」になっているタグでしか、スタイルを指定先として記述するコトしか出来ないので。

この場合の note.comのHTML構造だと「"記事タイトル" と "リンクタグ" が別々の並列階層になっている」ため、それぞれに個別にCSSを指定する事は可能ですが。「訪問済み」というトリガーを指定してその影響下に置く事が出来る範囲内、つまり aタグの下階層(親タグ見た子タグ系列)には記事タイトルに関連するタグが入っていないので。従ってこの状態では幾ら aタグに対するCSSを弄くり回しても、一切なんの影響も与える事はCSSの仕組み上、絶対に出来ないないのです。

なので stylus に限らず、他のCSS拡張機能を使っても基本的には難しいというか…無理ですね。

P.S.
一応、昨今のCSSの改良発展はめざましくて、昨年くらいから終に ":has()" という擬似クラスが実装され始めたみたいで。この新機能を駆使してCSSハックしまくれば、何とか実装出来なくもない様な気もしますが…ちょっと複雑怪奇で、ぱっと見では自分にもどうやったらリンク訪問済みの時のみに色変化を適用させられるのか分かりません。Javascriptを使えば実装は可能だと思いますが、それはそれでまた色々と面倒な事になりそうなので。

…という訳なので現時点ではCSSのみで実装するのは無理とは言わないが非常に困難。ただし note.comのCEO？の深津氏は、割とフランクにTwitterとかで一般人からの質問などにも対応してくれる事も多いので。ダメ元で彼に直談判してみては？意外と可能性が一番高い方法かもしれませんよ。

お礼

ご回答有難うございます。

現時点では無理そうですね。

確かに要望で上げてみるのが、
現時点では現実的な方法かと思ったので、
ダメ元でお願いしてみます。有難うございました。