ログってなんぼ

日々のメモです

Bootstrap3のbtnクラスの時だけ外部リンクアイコンを出さないようにする

外部リンクにアイコンを付けるCSS

別窓で開くリンクにアイコンをつける方法[はてなブログ] - AIUEO Lab2

サイトにリンクを貼るとき、そのリンクをクリックすると「新しいウィンドウで開くのか(target="_blank")」それとも「そのウィンドウ内で移動するのか」が分かったほうが、見ている方に親切です。

引用元:別窓で開くリンクにアイコンをつける方法[はてなブログ] - AIUEO Lab2


上記エントリが非常に参考になったので、自分のサイトでも導入してみました。

a[href^="http"] {
  background:url('/img/exlink.png') no-repeat right center;
  padding-right:18px;
  margin-right:5px;
}
a[href^="http://densho-now"] {
  background:none;
  padding-right:0px;
  margin-right:0px;
}

スクリーンショット 2015 02 04 23 23 57
ただ、Bootstrap導入済みサイトに上記CSSを適用したので・・

btnクラスにもアイコンついちゃう

スクリーンショット 2015 02 04 23 25 52
上のボタンは内部リンクなんで問題なしですが、下のボタンが外部リンクなんでおかしくなってしまう。

btnクラス意外に適用する

btnクラスについては適用外にしてしまう。属性セレクタの記述を拡張します。

a:not(.btn)[href^="http"] {
  background:url('/img/exlink.png') no-repeat right center;
  padding-right:18px;
  margin-right:5px;
}

スクリーンショット 2015 02 04 23 28 21
.btnは適用外になりました。