CSS3:自サイトURL以外へのリンクにスタイルを適用する記法

goto_jp 220views 更新:2014年8月4日
a:not([href^="http://www.example.com"]) {
    //スタイル
}

「:not」の非該当セレクタに属性セレクタの合わせ技です。

「:not」は条件に該当しない場合にスタイルを適用するセレクタですが、その条件としてリンクURLに自分のURLを指定しています。そうすることで、それ以外の外部サイトリンクなどに適用されます。

注意としては「/」で始まる相対パスにも適用されてしまう点ですが、WordpressなどのCMSはサイト内であってもフルパスでリンクを記述したりするので利用できるシーンもありそうです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません