aタグのhrefやtargetを判別してCSS指定する方法

サイト制作時にリンク設定などで頻繁に使うaタグですが、その飛び先はサイト内リンクやページ内リンク（アンカーリンク）、外部リンク、メーラーを起動、スマホであれば電話を掛けるなど使用用途は様々です。そして、それらのリンクの種類ごとに飛び先がわかりやすいようにアイコンなどで、リンクの種類がひと目で分かるようにするなどの配慮も必要になります。今回はCSSのみでリンクを判定し、スタイルを振り分ける方法を紹介します。

target属性によって指定する方法

基本的にtarget=”_blank”の形で指定することが多いtarget属性ですが、

a[target="_blank"]{
	指定したいプロパティ
}

上記のように書くことで、target=”_blank”が指定されているaタグにのみに指定することができます。もちろん”_blank”の部分を変えることで、他のtarget属性に指定するようにできます。
ちなみにですが、target=”_blank”には脆弱性があるため、_brank指定をする際はrel属性としてnoopenerやnoreferrerを指定してあげることを推奨します。
詳しくはこちらのページを参考にしてみてください。
参考サイト

href属性によって指定する方法

次にhref属性によって指定する方法です。target属性と違い、指定する値が様々になります。基本的にはtarget属性と同じように指定ができますが、target=”_blank”のように入る値が決まっていないので、指定方法にちょっと工夫する必要があります。

href*=”〇〇”・・・〇〇を含む場合
href^=”〇〇”・・・〇〇で始まる場合
href$=”〇〇”・・・〇〇で終わる場合

これらのように指定することができます。

a[href$=".pdf"] {
	指定したいプロパティ
}

例として、上記のように書くことでhrefの中身が”.pdf”で終わる場合＝リンク先がpdfファイルの場合にのみ指定することができます。
href^=”〇〇”の指定方法は、jsのアンカースクロールで見覚えがあるかと思いますが、cssでもa[href^=”#”]{}と書くことでアンカースクロールの場合のみに指定することができるようになります。これらの書き方はhrefの中身だけでなくcssのクラス名にも使うことができます。たとえば、

<p class="rd_txt">テキストテキスト</p>

このようなhtmlがあったときに

[class^="rd_"] {
 color: red;
}

cssでこのように書いてあげることで” rd_”から始まるすべての要素に対して指定することができます。使い方次第でスタイルを一括で管理できるようになるので参考にしてみてください。
実際にこれらの書き方を使用したサンプルを用意したので御覧ください。サンプル内では記事内で紹介した_blankや.pdfの他に、各拡張子による振り分けや、mailto:やtel:から始まるものに対してメールや電話アイコンを付けるといったことをしています。
サンプルページ

まとめ

リンク先によってスタイルを使い分ける方法はclassを付けるというやり方が一般的かと思いますが、今回紹介した方法を使えば自動的に反映されるので、class名をつけ忘れた時にアイコンが表示されないといったことを防ぐことができます。しかし、_blank指定のもの全てにアイコンが付けたいわけではない場合などではclassによる出し分けのほうが便利になることもあるので、どちらが優れているとかではなく状況によって使い分けることが大切です。

WEBプログラマー ／ K.S