例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。
ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。

そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。

早速属性セレクターを使ってみよう

属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。

書き方としては「属性$=”値”」という感じになります。
例えば以下のように[href$=”.pdf”]と書くとaタグのhrefの最後に『.pdf』が存在しているとアイコンをつけるということができます。

See the Pen
Untitled by kkdd (@kk8kk)
on CodePen.

『.docx』の方にはついていませんね。


今回は『::before』に指定をしましたが、afterでもbackgroundでも、aタグに『.pdf』が存在してさえすればきちんと表示してくれます。

試しにほかのファイルでも指定してみましょう。

See the Pen
ぞくせい by kkdd (@kk8kk)
on CodePen.

無事いろいろなファイルでもアイコンが表示されました。
WordやExcel、PowerPointなどは古いファイルは形式が異なるので、サイトによってはファイル指定を細かく行う必要があります。ここだけ注意しましょう。


属性セレクターを使ってファイルごとにアイコンをつけると管理がだいぶ楽になります。
ぜひ使ってみてください。