[CSS3] 属性セレクタを使って外部リンクにのみアイコンを表示する方法

Posted
2014-08-22

CSS3で追加された属性セレクタの正規表現的な機能(IE8以上対応です)を使って、外部リンクにのみアイコンを自動的に表示するということをこのブログでやってみました。しかし実際やってみると、思った通りの表示にならなかったり…。最後は少しjQueryの力を借りてしまいました。

内部リンクをすべて相対パスで指定している場合は外部リンクの判断は簡単で、hrefの値の始まりが “http” で始まっていればそれが外部リンクですね。属性セレクタで以下のように指定します。

a[href^="http"]

これで指定したセレクタに :after 要素でアイコンを表示します。（アイコンの表示には Font Awesome を使っている為、content で挿入しているのは Font Awesome のアイコンのコードです。）

a[href^="http"]:after{
  content: "\f0c1";
}

こんな表示になります。（HTML を含む全てのコードはタブで切り替えて確認できます。）

See the Pen hcfLm by Saomocari (@Saomocari) on CodePen.

今回のように WordPress だとリンクは内部リンクもすべて絶対パスになっています。絶対パスの場合は少し工夫が必要です。

IE9以上の対応でよい場合は :not() セレクタを使うのが簡単です。:not() セレクタは E:not( value ) という形で使います。value を含まない E 要素を指定できます。

自分のドメイン以外にという指定になるので以下のような指定になります。

a:not( [href^="http://memocarilog.info"] )

アイコンを表示するには以下のようなCSSにします。

a:not( [href^="http://memocarilog.info"] ):after{
  content: "\f0c1";
}

:not() セレクタを使わない場合、まずは http で始まるリンク全てにアイコン表示するようにします。

a[href^="http"]:after{
  content: "\f0c1";
}

次に、自分のドメインが含まれるリンクには content を表示しない指定をします。

a[href*="memocarilog.info"]:after{
  content:none;
}

これで外部リンクにだけアイコンが表示されました。

ここまでの指定方法だけでは、画像に外部リンクが貼ってある場合でも以下のようにアイコンが表示されてしまいます。

アイコンを表示したいのは文字リンクのみだったので少し困りました…。

:not() は子要素には効き目がないようで、img を子要素にもつ a 要素みたいな指定はできません。そこでここは jQuery に助けてもらうことにします。

以下のコードで、img を子要素にもつ a 要素には no_icon というクラスを付けます。（#main は親要素を指定します）

$(function() {
	$('#main').find('img').parent('a').addClass('no_icon');
})

そして、no_icon クラスがついているものは content 表示をなしにします。

a.no_icon:after{
  content:none;
}

これで、テキストリンクの外部リンクのみにアイコン表示ができました！

本当はすべて CSS のみで行いたかったのですが、〜の親要素に指定ができるセレクタ指定が思いつきませんでした…残念です。:not() セレクタの今後に期待したいと思います。

memocarilog