UserCSS:キーワード応じてページリストの背景色を変更する
特定の キーワードに一致するページの背景色を変更して強調する。
code:style.css
:root {
--accent-color: GreenYellow; /* 強調色 */
}
前方一致（プレフィクス）
code:stylexx.css
/* 先頭 */
.grid li.page-list-item > ahref^="/suto3/UserCSS" > .content {
background-color: var(--accent-color, GreenYellow) ;
}
.grid li.page-list-item > ahref^="/suto3/UserScript" > .content {
background-color: var(--accent-color, GreenYellow) ;
}
.grid li.page-list-item > ahref^="/suto3/Scrapbox" > .content {
background-color: var(--accent-color, GreenYellow) ;
}
後方一致（サフィックス）
code:stylexx.css
/* 末尾 */
.grid li.page-list-item > ahref$="%E3%81%99%E3%82%8B" > .content {
background-color: var(--accent-color, GreenYellow) ;
}
部分一致、ページタイトル中に特定のキーワードが含まれる
code:stylexx.css
/* 部分一致 */
.grid li.page-list-item > ahref*="User" > .content {
background-color: var(--accent-color, GreenYellow) ;
}
code:style.css
.grid li.page-list-item > ahref*="2021" > .content {
/*background-color: var(--accent-color, GreenYellow) ;*/
opacity:0.3;
}
code:stylexx.css
.grid li.page-list-item a:visited .title {
opacity:0.3;
}
UserCSS:ページリスト
UserCSS.icon
https://img.shields.io/badge/UserCSS-キーワード応じてページリストの背景色を変更する-1572B6.svg?logo=css3&style=for-the-badge