Привязываем иконку к каждому типу файлов на CSS

Предположим, что нам нужно сделать страничку, на которой будут выкладываться файлы разных типов (архивы, картинки, документы), и при этом мы хотим, чтобы каждый тип файла выделялся, но для того, чтобы его выделить пользователю, который добавляет файл, не придется утруждаться прописыванием стилей или классов. И не надо требовать от разработчиков модификации серверной части (чтобы та выводила ссылки с иконками).

Это все очень просто можно сделать при помощи CSS.

Каждый файл у нас — это ссылка.
Итак:

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

* This source code was highlighted with Source Code Highlighter.

Теперь прописываем общий стиль в 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.

То есть мы задали смещение для текста ссылки на 18 пикс влево, и установили картинку в фон. Эта картинка будет показываться по-умолчанию, то есть если пользователь добавит файл, не описанный нами.

Теперь приступим к описанию типов файлов:

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.

И т.д. то есть мы прописываем для каждого типа файла свою иконку и свой стиль (в принципе, мы можем даже подсвечивать каждый тип файла своим цветом).


Пример отображения архива, в html написано только:

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

* This source code was highlighted with Source Code Highlighter.

Живой пример

PS: Это мой первый хабратопик, не судите строго.