Being selective with Hyperlink Cues Options

[bek1]

Hello.

I have code in my CSS file that looks like this:

CODE

a[href$='.pdf'] {
    background:transparent url(../img/icons/page_white_acrobat.png) center left no-repeat;
    display:inline-block;
    padding-left:20px;
    line-height:15px; }

It works great. My problem is that I need to have some links not show the image cue. I'm actually a desktop developer, so it's all pretty new to me. Does anyone know how I can use this with *some* PDF links, but not others?

This post has been edited by bek1: Apr 9 2012, 01:16 PM

[pandy]

Then you need a more specific selector. You could use id or class, depending on how the HTML looks and combine those selectors with the one you already have.

If for instance all the links that should have the icon are in a certain section, maybe you can give that section an id.

CODE

#foo a[href$='.pdf'] { ... }

Or if they are sprinkled out you could give them a class.

CODE

a[href$='.pdf'][class$='foo'] { }

[bek1]

Pandy,

Thank you so much for responding.


They are sprinkled around my web pages. I am currently linking the PDF like this:

CODE

<a href="references/letter.pdf" title="Letter of Reference from Rick Smith"><img src="img/letter115x165.jpg" height="165" width="115" alt=""/></a><p>Rick Smith<br>Current Supervisor<br>at L&H</p>

Can you tell me how I would use your class example in HTML? Sorry to be such a noob.

This post has been edited by bek1: Apr 9 2012, 03:29 PM

[pandy]

Just add the class to the other attributes.

CODE

<a href="references/letter.pdf" class="foo" title="Letter of Reference from Rick Smith">

Maybe you can come up with a better name for it than foo though.