SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member jayminyoung's Avatar
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing text colour after linking to it with css

    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

  2. #2
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Member jayminyoung's Avatar
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    <!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.

    Code:
    <!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. #6
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very neat!

    Off Topic:

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

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EarlyOut View Post
    Very neat!

    Off Topic:

    I feel duty-bound, however, to point out that cabbage is not a fruit.
    class="fruitandveg"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •