Targetting specific anchor within div

HTML & CSS
1

Hi Guys,

I have a div with a background image and some text in it, i also have some hyperlinks in it

i want to make part of the background image a link
This is my css so far, however this applys the style to all hyperlinks

#box1{
width: 295px;
min-height: 305px;
float: left;
background: url(‘bg.jpg’) no-repeat;
}

#box1 a{
display:block;
width: 295px;
height: 30px;
}

here is my html

<div id="box1"><a href="link1"></a>
<span class="font"><br /><br /><br /><br />some font goes here:<br/>
<br/>
<a href="link2"></a><br>
<a href="link3"></a></span>
</div>
2

Instead of saying #box a {} say #box a.one - so give the different anchor a class. Or you you can say # box a+a. Given there will be no more anchors in the box.

3

Hi mari,

What EricWatson is saying is right. One more option is:

Create 2 diff classes let say…(.one and .two). Those anchor which do not belong to background add .two class to them and the one who belongs to background add .one class to it.

Because, If you are writing a common class for all anchor inside a div and then again making a separate class for specific anchor, then that specific anchor will have properties of both class.

My solution mentioned above will solve this problem.

4

problem solved,

thanks guys :slight_smile: