CSS trick: Same link text - different colours
Share & bookmark this article
You can also tell a friend about this article right now!
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.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
Advert: Training courses
Come on one of our excellent training courses and become a usability, accessibility or CSS guru!
- Web usability training
- Usability testing training
- Information architecture (IA) training
- CSS training - intermediate
- CSS training - advanced
- Search marketing & PPC training
- SEO training
- Web writing training - intermediate
- Web writing training - advanced
- Web accessibility training
Courses are held every month in London and are taught by usability and accessibility professionals.
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!
This article was written by Trenton Moss, director and founder of the user experience consultancy, Webcredible. They run a range of Internet marketing training courses, including 2 very good courses on SEO training and Search marketing & PPC training.
What next?
- Read more web development articles on this website
- Get a highly accessible CSS website through our accessible CSS web design expertise
- Get our accessible and usable CMS so your site offers outstanding accessibility
- Attend our interactive intermediate CSS training and advanced CSS training courses
