CSS trick: Same link text - different colours
Place your mouse over this link: This is a link
How does that work?
Advert: Training courses
Come on one of our excellent training courses and become a usability, accessibility or CSS guru!
- Writing for the web training
- Web usability training
- Usability testing training
- Web accessibility training
- Information architecture (IA) training
- Intermediate CSS training
- Advanced CSS training
Courses are held every month in London and are taught by usability and accessibility professionals.
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!
This article was written by Trenton Moss. Trenton's crazy about web usability and accessibility - so crazy that he founded Webcredible, an industry-leading user experience consultancy, helping to make the Internet a better place for everyone. He's very good at running CSS training and spends much of his time working on the world's most accessible CMS.
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
Republish our web development articles
All our web development articles are available for republishing, provided the author bio and links in the bio remain intact. You can also use our RSS news feed to republish links to our web development articles.
Bookmark or recommend this article
Add this article to:
You can also tell a friend about this article right now!
