Advanced Search

styling as per mime type / type of linked item

/ Published in: CSS
Save to your folder(s)
Style links depending on file format

Since CSS3 you can style links depending on some rules also called attribute selectors. This is extremely convenient if you have files in PDF, Zip among other and you want to display a small icon near it. With this technique you can do it without including an image on your link. This snippet shows a small icons next to your links telling the user if it is an external link, an email, a pdf, a zip or whatever you would like.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* external links
  2. 02
  3. The ^= specifies that we want to match links that begin with the http://
  4. 03
  5. */
  6. 04
  7. a[href^="http://"]{
  8. 05
  9.     padding-right: 20px;
  10. 06
  11.     background: url(external.gif) no-repeat center right;
  12. 07
  13. }
  14. 08
  15.  
  16. 09
  17. /* emails
  18. 10
  19. The ^= specifies that we want to match links that begin with the mailto:
  20. 11
  21. */
  22. 12
  23. a[href^="mailto:"]{
  24. 13
  25.     padding-right: 20px;
  26. 14
  27.     background: url(email.png) no-repeat center right;
  28. 15
  29. }
  30. 16
  31.  
  32. 17
  33. /* pdfs
  34. 18
  35. The $= specifies that we want to match links whose hrefs end with ".pdf".
  36. 19
  37. */
  38. 20
  39. a[href$=".pdf"]{
  40. 21
  41.     padding-right: 20px;
  42. 22
  43.     background: url(pdf.png) no-repeat center right;
  44. 23
  45. }
  46. 24
  47. /* zip
  48. 25
  49. Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
  50. 26
  51. */
  52. 27
  53. a[href$=".zip"]:after{
  54. 28
  55.     content: url(icons/zip.png);
  56. 29
  57. }
  58. 30
  59. /* djavupixel
  60. 31
  61. The *= specifies that at least one instance of the substring �djavupixel� matches.
  62. 32
  63. */
  64. 33
  65. a[href *="djavupixel"] {
  66. 34
  67.   padding-right: 17px;
  68. 35
  69.   background: url(icons/super-star.png) no-repeat right;
  70. 36
  71. }

URL: http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.