Course basket x

Course

Price per place

Add another courseCheckout

Pay now by credit card or later by invoice

CSS trick: Same link text - different colours

by Paul McCarthy on 1 May 2004

Place your mouse over this link: Thisisalink

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.example:hover
{
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.example:hover 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.example:hover 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.example:hover span span span
{
color: #0c0;
text-decoration: underline
}

And the final result: This is a link

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

Thank you for your comment. It has been submitted for approval.

Comment Again?

Leave a comment

Please enter your name.
Sorry, this email address is not valid.
Please enter your comment.