title: Change icon depending on file extension
body: <p>Hello I got a question whether it is possible to change the icon of parent node if the child contains a specific file extension.</p>
  
  <p>Let me explain myself by some code. I have the following setup:</p>
  
  <pre><code>&lt;span class="file"&gt;
    &lt;a href="../someurl/print.pdf" class=""&gt;Print PDF&lt;/a&gt;
  &lt;/span&gt;
  &lt;span class="file"&gt;
    &lt;a href="../someurl/test.pdf" class=""&gt;Test PDF&lt;/a&gt;
  &lt;/span&gt;
  &lt;p&gt;
  Should show up a word icon
  &lt;/p&gt;
  &lt;span class="file"&gt;
    &lt;a href="../someurl/word-test.docx" class=""&gt;Word document&lt;/a&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>With the following CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Is it possible to change the background of the <code>&lt;span&gt;</code> 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. </p>
  
  <p>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.</p>
  
  <p><a href="https://jsfiddle.net/kp4yxf4v/" rel="nofollow">DEMO HERE</a></p>