特定のリンクを持つカードの背景色を変更するUserCSS
カードリストでは、それぞれのページが持つリンクの情報がliに保持されている。
code:sample.html
<li class="page-list-item grid-style-item" data-page-title="メタノウハウ論についての準備ノート" data-page-links="'進化的手法' '『ふつうの相談』' '研究ノート'"><a href="/rashitamemo/%E3%83%A1%E3%82%BF%E3%83%8E%E3%82%A6%E3%83%8F%E3%82%A6%E8%AB%96%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E6%BA%96%E5%82%99%E3%83%8E%E3%83%BC%E3%83%88" rel="route"><div class="hover"></div><div class="content"><div class="header"><div class="title">メタノウハウ論についての準備ノート</div></div><div class="description"><p class="line">メタノウハウ論</p><br><p class="line">「ノウハウ」をどう使うのか、という話。</p><br><p class="line">知識の理解、利用についての書</p><br><p class="line">ノウハウの使い方、作り方</p><br><p class="line">それを踏まえた、ノウハウ本の在り方について</p><br></div></div></a></li>
言い換えれば、何かしらのリンクを与えれば、ページリストのdata-page-linksにその要素が加わることになる。それをトリガーにして、CSSを変更する。
code:style.css
}
#研究ノートへのリンクを持つページの背景色が変わる
https://gyazo.com/0f171251e6314748a46425cd98bc0834
タイトルに絵文字を付与し、それをキーにするよりも、Cosense的だと言えそう）。