Question

I want to replace anchor text with image using CSS. Here is my code.

HTML

<div id ="first">
<a href="#">Read More</a>
</div>

<div id ="second">
<a href="#">Read More</a>
</div>

CSS

#first #second a{
background:url(../images/layout/tab.png);
float:right;
}

Here is JsFiddle link http://jsfiddle.net/chhantyal/GDF9K/

Why is it not working? What’s the right way?

Answer 1

Your selector isn’t doing what you expect it to. Your current selector matches this structure:

<div id="first">
  <div id="second">
    <a href="#">Hello</a>
  </div>
</div>

You have to be verbose:

#first a, #second a {
  background:url(../images/layout/tab.png);
  float:right;
}

Demo: http://jsfiddle.net/GDF9K/2/

But if since you asked for the right way, I suggest you use a class:

<div id="first">
  <a class="foo" href="#">Read More</a>
</div>

<div id="second">
  <a class="foo" href="#">Read More</a>
</div>

And your CSS becomes:

a.foo {
  background: url(../images/layout/tab.png);
  float: right;
}