Bind an icon to each type of file on CSS

Suppose that we need to make a page on which files of different types will be laid out (archives, pictures, documents), and at the same time we want each file type to be allocated, but in order to allocate it to the user who adds the file, do not have to bother prescribing styles or classes. And do not require the modification of the server-side from the developers (so that it displays links with icons).

This is all very easy to do with CSS.

Every file we have is a link.
So:

< a href ='downloads/myArch.zip' > myArch.zip </ a >

* This source code was highlighted with Source Code Highlighter .

Now we write the general style in CSS:

a{
padding-left: 18px;
background-position: 0 0;
background: transparent url(icon.png) no-repeat;
}

* This source code was highlighted with Source Code Highlighter .

That is, we set the offset for the link text to 18 pixels left, and set the image to the background. This picture will be shown by default, that is, if the user adds a file that is not described by us.
')
Now let's proceed to the description of file types:

a[href $= '.pdf' ] {
padding-left: 18px;
background-position: 0 0;
background: transparent url(pdf.png) no-repeat;
}
a[href $= '.zip' ] {
padding-left: 18px;
background-position: 0 0;
background: transparent url(zip.png) no-repeat;
}

* This source code was highlighted with Source Code Highlighter .

Etc. that is, we prescribe for each type of file its own icon and its own style (in principle, we can even highlight each type of file with its own color).


An example of the display of the archive, in html it is written only:

< a href = psycho . zip > psycho.zip </ a >

* This source code was highlighted with Source Code Highlighter .

Living example

PS: This is my first habratopic, do not judge strictly.