1 reply [Last post]
Last seen: 13 years 2 weeks ago
Joined: 2009-11-12
Posts: 1
Points: 2

I am a CSS amateur, using wordpress. Someone set up my stylesheet to automatically put a PDF icon next to links pointing to any file ending in .pdf, which looked like this:

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

The above code works nicely, so on my document archive page, for example, I use an ordinary <a href="anyfilename.pdf"> and the icon appears to the left of the link, as I want it to.

I wanted to add an exception for my home page, where I do NOT want the icon appearing. I attempted to do this by changing the CSS code to:

a .noPDF {
padding-left: 0;
background: none;
a [href $='.pdf'] {
padding-left: 18px;
background: transparent url(../images/pdf.gif) no-repeat center left;

The idea is that my archive page will stay the same, with ordinary <a href="anyfilename.pdf">, and maintain the PDF icons. My home page will use <a class="noPDF" href="../document.pdf"> and NOT have the icon.

However, the result is that the icon now NEVER appears anywhere. I tried swapping the 2 pieces of code in the CSS around, but that made no difference.

Please can someone explain to me what I've done wrong? The principles are confusing me here a bit! Thanks.

Hugo's picture
Last seen: 7 years 46 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806

If you are able to add a

If you are able to add a class to the links that do not require an icon then you would do something similar to this:

a.noPDF {padding-left:0; background:none;}

Your first ruleset actually states that the properties of that ruleset should be applied to a class name of .notPDF that has a parent or ancestor this is because you have left a space between the element 'a' and the class selector .notPDF, however that should not have knocked out all pdf icons, in theory it should not have been applied at all as the class name would not have been found as a child of an anchor element. I would hesitate to speculate further and would want to see your full markup rather than code snippets to determine what was actually occurring.

The 'notPDF' ruleset should follow the other but off top of my head can't remember what 'weight' attribute selectors hold, possibly they have a higher specificity than a single class in which case the 'notPDF' ruleset will need a heavier weight by adding a parent selector before the anchor selector and separated by a space.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me