Question

We use a a[href*=".pdf"] CSS selector rule to show a pdf icon when the href has .pdf as its extension, but the problem is it’s showing for <a> tags with image tags inside them as well as well.

<a href="foo.pdf">foo</a> => Works fine
<a href="foo.pdf"><img src="big_image.gif" /></a> => No good. 

We don’t want to show the PDF icon for this kind of links.

Please let me what kind of CSS selectors we should write for such case?

Answer 1

I’m afraid there isn’t a CSS selector that lets you select links that don’t have <img> tags inside them. (See CSS selector for "foo that contains bar"?.)

jQuery lets you select links that do contain images via its :has() selector. You could use that to add a class to links with an image inside them, and use that class to turn off your PDF styles.

Otherwise, you’ll need to add a class to these links on the server.