あるディレクトリへのリンク色を変える

2010年1月14日

特定のURLの特定ディレクトリのリンクだけ、ぱっと見で区別したい。もちろん、そのサイトのHTML・CSSに手を入れることなく区別したい。

......と思ってたけど、いい方法が浮かばなくて地道にマウスをリンクの上に乗せていたら、Stylish とCSSでいけることに唐突に気が付いた。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("test.localhost") {
   a[href^="/dir1/"] {
      background-color: #faa !important;
   }
   a[href^="/dir1/"] img {
      border-top: 1px solid #faa !important;
      border-bottom: 1px solid #faa !important;
   }
   a[href^="/dir2/"] {
      background-color: #f00 !important;
   }
   a[href^="/dir2/"] img {
      border-top: 1px solid #f00 !important;
      border-bottom: 1px solid #f00 !important;
   }
}

<http://test.localhost> 内のhref属性が「/dir1/」で始まるリンクの背景を#faaに、href属性が「/dir2/」で始まるリンクの背景を#f00に変える。画像は背景が効かないから、上下にボーダーをひいてみる。

a[href^="/aaa/bbb/"]
「/aaa/bbb/」で始まる。
a[href*="aaa"]
「aaa」を含んでいる。
a[href$="aaa"]
「aaa」で終わる。

アトリビュート系は使わないから、いざというときに出てこない。

Category

Archives