Rotan075 Rotan075 - 4 months ago 9
HTML Question

Change icon depending on file extension

Hello I got a question whether it is possible to change the icon of parent node if the child contains a specific file extension.

Let me explain myself by some code. I have the following setup:

<span class="file">
<a href="../someurl/print.pdf" class="">Print PDF</a>
</span>
<span class="file">
<a href="../someurl/test.pdf" class="">Test PDF</a>
</span>
<p>
Should show up a word icon
</p>
<span class="file">
<a href="../someurl/word-test.docx" class="">Word document</a>
</span>


With the following CSS:

span.file{
background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat;
padding: 1px 0 1px 20px;
display: block;
}
span.file a[href$=".docx"] {
background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat;
}


Is it possible to change the background of the
<span>
depending on the file extension? As can been seen in the demo below the Word icon is generated but it does not replace the current PDF icon.

Please keep in mind that I can not change the HTML due to the fact that the HTML is rendered through a module within DNN. Therefore I need a solution that is pure CSS only or perhaps with some help of Javascript.

DEMO HERE

Answer

Use the background-image on anchor instead of span. Updated Fiddle

span.file {
  display: block;
  padding: 1px 0px;
}
span.file a[href$=".docx"] {
  background: url('http://image.chromefans.org/fileicons/format/docx.png') left center no-repeat;
  padding-left: 20px;
}
span.file a[href$=".pdf"] {
  background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') left center no-repeat;
  padding-left: 20px;
}
<span class="file">
  <a href="../someurl/print.pdf" class="">Print PDF</a>
</span>
<span class="file">
  <a href="../someurl/test.pdf" class="">Test PDF</a>
</span>
<p>
  Should show up a word icon
</p>
<span class="file">
  <a href="../someurl/word-test.docx" class="">Word document</a>
</span>