CSS a.className:attr properties

Question

I have the following html markup:

<span class="content_right_img">
 <a href="url" class="pic_link"><img src="lnk.gif" alt="alt" /></a>
</span>
<p>blah blah blah <a href="url">link text</a> more blah blah blah</p>

and the following CSS rules:

#mainContent a:link {
text-decoration: none;
color: black;
border-bottom: 2.5px solid #FF0;
}
#mainContent a:visited {
text-decoration: none;
color: black;
border-bottom: 2.5px solid #FF0;
}
#mainContent a:hover {
text-decoration: none;
color: black;
background-color: yellow;
}
.content_right_img {
float: right;
padding: 5px 0 5px 10px;
border: none;
text-decoration: none;
}

The client wants the links to be 'highlighted' with the yellow underline, which works fine on text links. We, however, do NOT want images enclosed inside of links to also have the border-bottom property. Currently there is an underline in FF but not Safari (haven't looked at IE) and the area bellow the img receives the background color on hover.

I added class="pic_link" to the a tag in an attempt to write a separate set of href rules but had no success.

I tried:

.className
a.className
.className:link
a.className:link

but have not had any luck. What is the proper way to assign css properties to different classes of a href? Is there a better way entirely to do this?

Thanks for the help.

Answer 1

a.className:link
a.className:visited
a.className:hover
a.className:active

should work

Answer 2

Try this selector:

#mainContent a.pic_link:link,
#mainContent a.pic_link:visited,
#mainContent a.pic_link:hover {
    border-bottom-width: 0;
}

Answer 3

When you place an image inside a link. you should set border="0"

<span class="content_right_img">
   <a href="url" class="pic_link">
       <img src="lnk.gif" border="0" alt="alt" />
   </a>
</span>