a[type="application/pdf"] vs a[href$=".pdf"]

Question

What is the difference between these 2 selectors a[type="application/pdf"] and a[href$=".pdf"]

a[type="application/pdf"] { 
  background-image: url(/images/pdf.gif);
  padding-left: 20px;
}

a[href$=".pdf"] { 
  background-image: url(/images/pdf.gif);
  padding-left: 20px;
}

Answer 1

The accepted answer isn't completely correct. No selector does "MIME type matching".

a[type="application/pdf"] will match all links where the "type" attribute is set to "application/pdf". If you want to display a PDF icon you'll need to add type="application/pdf" to all the approprite links.

This is exactly what the type attribute on links is intended for (see the spec), to provide a "hint" to the MIME type. However, the browser doesn't actually know what the type of a file is until it starts downloading it. Just wanted to clear that up.

The other selector, a[href$=".pdf"], matches the URL of the link only. It will match any links that end in .pdf, whether they are actually PDF files or not. And of course, it won't match URLs like file.pdf?v=2.

Your best bet is to mark all links to PDF files manually, either with the type attribute, or since you want IE-compatibility, just a regular class instead.

Answer 2

One does MIME type matching and the other does extension globbing. You should probably use the first one because not everyone uses file extensions.