Changing text colour after linking to it with css

HTML & CSS
1

Hi all,
I have a problem with css, I hope someone can tell me first if is possible, then if it is advise me how to do it.
What i want to do is, I have an alphabetical index list across the top of the page which when I select a letter it links me to a product that starts with that letter, when i land on the product with that letter I want that product name text to change colour and when I make another selection, for it to change back to the original colour.
Hope this makes sense
Regards
Peter :confused:

2

just css probably won’t do. you might need some scripting to set the class for them accordingly.

Here is an example class for basic links. you can use another for visited state.

.footer {color:#ccc;}
.footer a:link,.footer a:visited,.footer a:active {text-decoration:none;color:#99ccff;}
.footer a:hover {text-decoration:none;color:#6fabe7;}

3

webcosmo,
Thank you for your reply,
Just to clarify, I do not want to change the link colour “<a href=”#apples">A</a>" but the data in the table it links to"<td><a name=“apples”>Apples - Jonathon</a></td>" when visited. see code below…

<p><a href=“#apples”>A</a>-<a href=“#bananas”>B</a>-<a href=“#cabbage”>C</a></a>-D-E-F-<a href=“#ginger”>G</a>-H-I-J-K-<a href=“#leeks”>L</a>-<a href=“#mushroom”>M</a>-N-O-<a href=“#peas”>P</a>-Q-R-<a href=“#swwet”>S</a>-<a href=“#tomato”>T</a>-U-V-W-X-Y-<a href=“#zucchini”>Z</a></P>
<center></center>
<table width=“250” border=“0” align=“left”>
<tr>
<td><table width=“250” border=“0”>
<tr>
<td><a name=“apples”>Apples - Jonathon</a></td>
</tr>
<tr>
<td><hr size=“1” width=“250” /></td>
</tr>
<tr>
<td>Apples - Granny smith</td>
</tr>
<tr>
<td><hr size=“1” width=“250” /></td>
</tr>
<tr>
<td><a name=“bananas”>Bananas - Lady finger</a></td>
</tr>
</table>

4

AFAIK, that can’t be done with CSS. You need some Javascript that would detect what the user has clicked on, then change the class for the data in the table, so that its color can change. CSS is not a scripting language (though for things like hover, it can behave a bit like one!).

5

Hi,

I’m not sure if this is what you mean but you can use the :target pseudo class (IE9 plus other modern browsers).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
    margin:2em 0;
    padding:0;
    list-style:none;
}
.index li {
    display:inline;
}
ul.fruit {
    width:400px;
    border:2px solid #000;
    padding:10px;
}
ul.fruit li {
    border-top:1px dotted #ccc;
    border-bottom:1px dotted #ccc;
}
ul.fruit li a{
    display:block
}
.fruit li:target {
    background:red;
    color:#fff
}
</style>
</head>
<body>
<ul class="index">
    <li><a href="#apples">A</a>-</li>
    <li><a href="#bananas">B</a>-</li>
    <li><a href="#cabbage">C</a></li>
</ul>
<ul class="fruit">
    <li id="apples">This is an Apple</li>
    <li id="bananas">This is a Banana</li>
    <li id="cabbage">This is a Cabbage</li>
</ul>
</body>
</html>

You could probably support less than IE9 with something like this but relies on using anchors for the target element.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
    margin:2em 0;
    padding:0;
    list-style:none;
}
.index li {
    display:inline;
}
ul.fruit {
    width:400px;
    border:2px solid #000;
    padding:10px;
}
ul.fruit li {
    border-top:1px dotted #ccc;
    border-bottom:1px dotted #ccc;
}
ul.fruit li a{
    display:block
}
.fruit li a:target {
    background:red;
    color:#fff
}
.fruit li a:focus,
.fruit li a:active {
    background:red;
    color:#fff
}

</style>
</head>
<body>
<ul id="index" class="index">
    <li><a href="#apples">A</a>-</li>
    <li><a href="#bananas">B</a>-</li>
    <li><a href="#cabbage">C</a></li>
</ul>
<ul class="fruit">
    <li><a href="#index" id="apples">This is an Apple</a></li>
    <li><a href="#index" id="bananas">This is a Banana</a></li>
    <li><a href="#index" id="cabbage">This is a Cabbage</a></li>
</ul>
</body>
</html>
6

Very neat!

Off Topic:

I feel duty-bound, however, to point out that cabbage is not a fruit. :wink:

7

class=“fruitandveg” :slight_smile: