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.

[bek1]

Haha. Pandy, you rule. I renamed "foo" to "plainlink" just for you.

I put this class in and it worked like a charm, but I'm encountering a new problem. The code I gave you above was actually just a little out of date (sorry, did not realize that 'til just now), and I'm actually using this now:

CODE

<a class="thumbnail" href="#thumb">
    <img src="img/letter115x165.jpg" width="115" height="165" border="0" />
    <span>
        <img src="img/tree.jpg" />Letter of Reference from Rick Smith, current Branch Manager.
    </span>
    <p>Rick Smith<br>Branch Manager<br>at Labor</p>                            <!-- Text under picture -->

    <a href="references/rickjohnson.pdf" class="plainlink" title="Letter of Reference from Rick Smith, current Branch Manager">

    </a>
</a>

When my user clicks on my link (OR my popup), nothing happens. But I thought the anchor a href=" should have taken care of that. Have I coded myself into a corner? I actually need it to open up my pdf when the user clicks on the image on the page. Any idea what I am doing wrong? Did I screw myself up by adding the class?