HomeCSS - 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 code together, bit by bit:
a:link.example, a:visited.example, a:active.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 code, we'll write this code:
a:link.example span, a:visited.example span, a:active.example span { color: #f00; text-decoration: none }
a:hover.example span { color: #00f; text-decoration: underline }
This give 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 assign a value to the new <span> tag:
a:link.example span span, a:visited.example span span, a:active.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 would be:
a:link.example span span span, a:visited.example span span span, a:active.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, nesting! (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?
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. Congratulations! But how often are you going to actually use this? Here's some practical examples for using your new knowledge:
Back to top
Mouseover this link: ↑ Back to top
Here's the HTML code:
<a href="#" class="top"><span>↑</span><strong> </strong>Back to top</a>
(using ↑ in HTML produces ↑)
And the CSS:
a:link.top, a:visited.top, a:active.top { color: #26a }
a:hover.top { color: #fb0 }
a:link.top span, a:visited.top span, a:active.top span { text-decoration: none; color: #555; font-weight: bold; padding:1px; border: 1px #555 solid }
a:hover.top span { text-decoration: none; color: #26a; font-weight: bold; padding: 1px; border: 1px #26a solid }
a.top strong { text-decoration: none }
Navigation
Mouseover these links to see what happens! Here's the HTML code:
<div id="menu">
<ul>
<li><a href="#"><strong>» </strong>Link 1</a></li>
<li><a href="#"><strong>» </strong>Link 2</a></li>
<li><a href="#"><strong>» </strong>Link 3</a></li>
</ul>
</div>
And the CSS:
#menu ul { margin: 0; padding: 0; list-style: none }
#menu a:link strong, #menu a:visited strong { color: #fff; text-decoration: none }
#menu a:hover strong, #menu a:active strong { color: #26a; text-decoration: none }
This article was written by Trenton Moss. He knows an awful lot about accessible web design.
09 dec 2003 - 1
]
[
]