Webサイトを制作しているとき、「別タブで開くリンクには外部リンクアイコンをつけたい」「PDFリンクにはPDFアイコンをつけたい」ということはありませんか？
毎回手動で class="icon-pdf" などとクラスをつけても良いのですが、ページ数が増えると付け忘れなどのミスが起きがちです。
そこで今回は、CSSの「属性セレクタ」を使って、スタイルを切り替える方法を解説します！
target属性によってスタイルを変える方法
まずは、リンクを別タブで開く際によく使う target="_blank" にだけスタイルを適用する方法です。
CSSでは以下のように記述します。
/* すべてのリンクの共通スタイル（右側に矢印アイコンのための余白を作る） */
a {
position: relative;
padding-right: 33px;
line-height: 1.5;
letter-spacing: 0.01em;
color: #000;
}
/* すべてのリンクの右側に、通常の矢印を表示 */
a::before {
position: absolute;
top: calc(50% - 8px);
right: 0;
width: 15px;
height: 15px;
background: url(./arrow.svg) center center / cover no-repeat;
content: "";
}
/* 矢印を45度回転させる */
a[target="_blank"]::before {
transform: rotate(-45deg);
}このように a[属性名="値"] と書くことで、特定の属性を持つaタグだけをピンポイントでCSSを指定できます。「 _blank 」の部分を他の値に変えれば、別のtarget属性にも対応可能です。
href属性（拡張子や文字列）によってスタイルを変える方法
次に、リンク先によってスタイルを変える方法です。 target属性とは違い、href に入るURLやファイル名はページごとに様々ですよね。そこで、CSSの「部分一致」などの便利な指定方法を活用します。
/* .pdfの後方一致 */
a[href$=".pdf"] {
color: #ff0000;
}
/* # の前方一致 */
a[href^="#"] {
font-weight: bold;
}実際の案件でよく使われるサンプルも用意しました。
/* tel:から始まるリンクに電話アイコンを付与 */
a[href^="tel:"]::before {
content: "📞 ";
}
/* mailto:から始まるリンクにメールアイコンを付与 */
a[href^="mailto:"]::before {
content: "✉️ ";
}
/* .xlsxで終わるリンクにExcelアイコンを付与 */
a[href$=".xlsx"]::after {
content: "Excel";
font-size: 0.8em;
border-radius: 2px;
border: 1px solid #1d6f42;
color: #1d6f42;
}まとめ
リンク先によってスタイルを自動で切り替える方法を紹介しました。
属性セレクタをマスターすれば、HTMLにわざわざクラス名を書き足さなくても、ブラウザが自動的に判断してデザインを当ててくれるようになります。
上手に使いこなしてみてくださいね！
