CODEWITHSUNDEEP
htmlcsshyperlinkstyling
user1176372
user1176372

Reputation: 21

Styling different parts of the same link

I'm not sure if this is even possible, but I want to style 1 part of a link differently, but for it still to act as a part of the link when it comes to hover, etc.

To explain, I've got the following html:

<span class="link1">
<a href='http://www.google.com'>
Google
<span class="link2"> Link</span>
</a>
</span>

and the following CSS:

.link1 a {
color: #ff0000; 
}
.link2 a {
color: #00ff00;
}

This would hopefully make a link that had Google in red and Link in blue despite them being the same link.

Any suggestions?

Upvotes: 2

Views: 132

Answers (2)

Charlotte Dann
Charlotte Dann

Reputation: 298

.link2 a does not work because there is no a in .link2. It would work if you made it

.link1 a .link2 {
    color: blue;
}

Upvotes: 0

My Head Hurts
My Head Hurts

Reputation: 37665

You are close, but as mentioned by @CharlotteDan, in the second CSS class you are trying to target an anchor tag held within an element with the class link2 which does not exist.

You could achieve what you are trying to do with the following:

HTML

<a href='http://www.google.com'>
    Google
    <span>Link</span>
</a>

CSS

a {
    color: #ff0000;
}
a > span {
    color: #00ff00;
}

JSFIddle: http://jsfiddle.net/udfUS/

Upvotes: 2

Related Questions