CSS trick: Same link text - different colours

Place your mouse over this link: This is a link

How does that work?

Pretty neat! This link is created by nesting elements. Let's put the CSS code together, bit by bit:

a.example
{
color: #00f;
text-decoration: none
}

a:hover.example
{
color: #f90;
text-decoration: underline
}

<a href="#" class="example">This is a link</a>

...Giving you: This is a link

(#00f and #f90 are shortened versions of #0000ff and #ff9900 respectively - you can apply this shortened version to any value like this)

Nesting elements

Pretty straightforward so far. Now, here's the fun part! We can nest a <span> tag in the middle of the link:

<a href="#" class="example">This <span>is a link</span></a>

This doesn't actually change anything so we need to assign a value to the <span> tag in the CSS. In addition to the above CSS rule, we'll insert this CSS rule:

a.example span
{
color: #f00;
text-decoration: none
}

a:hover.example span
{
color: #00f;
text-decoration: underline
}

This gives us: This is a link

Nesting... again

Right, let's get nesting again:

<a href="#" class="example">This <span>is <span>a link</span></span></a>

Now let's create a new CSS rule for this <span> tag:

a.example span span
{
color: #0c0;
text-decoration: none
}

a:hover.example span span
{
color: #f00;
text-decoration: underline
}

Now we have: This is a link

The final nesting

<a href="#" class="example">This <span>is <span>a <span>link</span></span></span></a>

The new CSS rule is:

a.example span span span
{
color: #f90;
text-decoration: none
}

a:hover.example span span span
{
color: #0c0;
text-decoration: underline
}

And the final result: This is a link

All done... Or are we? What about those ugly lines in between the words? Any idea how to get rid of them? That's right, CSS and nesting! Don't you just love CSS! (This final trick has limited support outside of IE.)

Removing the lines

Time for the final nest and this time unless we want things to get really messy we shouldn't use the <span> tag. So, let's use <strong> - no particular reason why, just that it's not <span>.

We need to put the <strong> tag around each of the spaces in between the words. So, the final HTML code for this would be:

<a href="#" class="example">This<strong> </strong><span>is<strong> </strong><span>a<strong> </strong><span>link</span></span></span></a>

Phew! Bit tricky, eh? Our new CSS rule is:

a.example strong
{
text-decoration: none
}

And all that gives us what we started off with, namely: This is a link

So now you've learnt how to change colours within the same link, using the power of CSS - congratulations!

This article was written by Trenton Moss. Trenton's crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone. He also knows an awful lot about the Disability Discrimination Act