web関連

【css】aタグに指定してあるPDFリンクをcssで判別する方法

2019/08/28

2019/08/31

【css】aタグに指定してあるPDFリンクをcssで判別する方法

<a href="">に指定してあるPDFファイルをjavascriptを使って判別しようと思ったらcssの方で拡張子を判別する事が出来て驚いたので備忘録

cssでリンクがpdfかどうか判別する方法

a[href$=".pdf"]{
…
}

書き換えればjpgとかExcelやWordなんかもいける

URLかどうか判別する際はこう書く

a[href^="https://"] {
…
}
もうIE周りも対応して要るっぽいからガンガン使ってよさそう

「前方一致(^=)」「後方一致($=)」「部分一致(*=)」ってのがあるみたい

//前方一致の「^=」
a[href^="https://"] {
…「https://」から始まるリンクを持つaタグ指定
}
//後方一致の「$=」
a[href$=".pdf"]{
…「.pdf」と末尾につくリンクを持つaタグ指定
}
//部分一致の「*=」
a[href*="sample.com"] {
…「sample.com」をリンク内に持つaタグ指定
}
使いこなせれば便利そう

↓参考

[href^=#]とはなんぞや。ページ内リンクをスムーススクロールさせる時に記述しているあれ

初心者は意外と使っていないかもしれないCSSの指定の仕方

【CSS】実はこんなに便利!cssのセレクタ指定方法をちょっとだけ掘り起こしてみた

 

cssすげっ
参考にした記事7年以上前だけどこんなことできるの知らなかった、すげっ