Auto PDF link icon, but not for image links

I’m currently using this CSS to automatically add a PDF icon to all of our PDF links:

a[href $='.pdf'] { 
   padding-right: 18px;
   background: transparent url(/images/icon_pdf.gif) no-repeat center right;
}

This works great, except it also adds it to images that are linked to PDFs, and that doesn’t look so good. I’m trying to figure out a global way to fix this without adding a class.

This looks like it should work, but doesn’t:

a[href$=".pdf"] img[src$=".jpg"] {
  background: none;
  padding-right: 0;
}

Is this possible to do?

I don’t know if it will work but shouldn’t you have a space before the $ sign?

Ah good catch, but actually it works with or without that space (I just tried to make sure).

Now, if I add display: none; to the second one, the image disappears, so it DOES do something, just not what I want it to do. It looks like that code is applying the style to the img tag and not the a tag.

I’m guessing you have some images inside links?

If so, try using the empty selector
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aempty

Yeah, I have these, which I want to have the icon:

<a href="myfile.pdf">PDF Version of this Report</a>

And these, which I don’t:

<a href="tnmap.pdf"><img src="tnmap.jpg" alt="Tennessee Map" /></a>

I think I can’t select a parent tag of a child, so I’ll probably have to use a class for those. But with around 30,000 PDF links and only a few dozen being images, I think that’s not a bad trade-off. Better than having to add a class to them all.

I just did some checking and it seems “empty” means literally “nothing”

i.e.
<a ...></a>

and that child elements and link text are considered “something” so the empty selector won’t work for this. :frowning:

Yes, I want the has selector !!!
The closest to it now is jQuery

it’s not adding it to the image (IMG tag). it’s only adding it to the link (A tag) regadless whether it contains a tag or not.
there are a several Untitled.html (288 Bytes) of ways around this:

  1. wrap text ( when the link is not an image) in a SPAN, target the span a[href $='.pdf'] span {...}
  2. use empty selector , as suggested by Mittineague
  3. If the images DO NOT have a transparent BG, or any sibling elements, you could hide the container’s bg by ‘pulling back’ the space from the padding-right: [href$=".pdf"] img[src$=".jpg"] {margin-right:-18px;}

hope that helps

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.