Click here to Skip to main content
13,596,086 members
Click here to Skip to main content
Add your own
alternative version


32 bookmarked
Posted 18 Jul 2004

Simple "New" Indicator Using CSS

, 18 Jul 2004
Rate this:
Please Sign up or sign in to vote.
Using the functionality of A:Link and A:visited to power a "new" indicator for messages, postings, etc.

Sample Image - CSSAnchor.gif


If you've ever written a message board engine, you may have wanted to give your users a way to tell if new messages have been posted since their last log in. Beside these new postings, you want a little "new!" image so your users can quickly identify the new messages. Ideally, this image disappears once they have read the message or replies.


An easy technique to achieve this result is to simply call anything that is newer than X days "new". This requires no per-user logging on the back-end (knowing which messages each user has read). However, once a user reads the new messages, they're no longer new to that user, yet the "new!" icon will continue to be displayed.

On the other end of the spectrum, you can store which messages each user has read and use that when displaying the list. However, this requires a lot of work on the back-end; too much work for the small result of a "new!" icon!

Using the code

The technique in this article is in the middle of the two extremes above. While it's not going to be 100% accurate, it's also very simple to implement. It uses the default behavior of the HTML anchor tag <a>.

The key is that this tag has two pseudo-classes: a:link and a:visited, meaning the link has never been visited and has been visited recently, respectively. They can be treated in a style sheet independently as shown below, where I create a generalized class called MsgAnchor:

.MsgAnchor { } 
.MsgAnchor A:visited 
.MsgAnchor A:link 

Now, I can use this CSS class on the element surrounding the <a> tag and the user's browser will take care of determining which of the pseudo-classes to use based on whether or not the user has visited the link or not.

This is basic style sheet information--nothing new yet. The trick is how you take advantage of these pseudo-classes in building your message list. I'll provide a simple example of a message list where the users first see a list of topics and can click on the topic to view the replies. I've tried to make this example simple to demonstrate the purpose of the article and not to show a fully-functional message board. The main page pulls messages from the database and displays them to the user. Here is the resultant HTML that is generated:

<table ID="Table1">
        <td><b>Date Submitted</b></td>
            <a href="CSSSampleDetails.html?ID=1&NumReplies=4">
                                 Building Robust ASP Pages</a>
            <span class="MsgAnchor">
               <a href="CSSSampleDetails.html?ID=1&NumReplies=4">New!</a>
        <td>7/19 09:56AM</td>
        <td>John Doe</td>
            <a href="CSSSampleDetails.html?ID=2&NumReplies=2">
                                  Anyone seen this before?</a>
            <span class="MsgAnchor">
               <a href="CSSSampleDetails.html?ID=2&NumReplies=2">New!</a>
        <td>7/19 08:50AM</td>
        <td>Jimmy D.</td>
            <a href="CSSSampleDetails.html?ID=3&NumReplies=15">
                                    Programming question...</a>
            <span class="MsgAnchor">
               <a href="CSSSampleDetails.html?ID=3&NumReplies=15">New!</a>
        <td>7/18 08:50AM</td>
        <td>Newbie L.</td>

The <span> element whose CSS class is MsgAnchor houses an anchor tag. The HREF for the anchor tag includes the number of replies to this message: <a href= "CSSSampleDetails.html?ID= 2&NumReplies= 2">. Note that the HREF for the message topic link is the exact same URL.

Now, when the user first sees this list, all anchor tags will be unvisited and will thus use the a:link class. If we use the MsgAnchor class shown earlier, this means the text "New!" will be displayed as LightGreen with no text decoration.

The user then clicks on one of the message links to view the replies. This will cause the corresponding link to become "visited" and the browser will use the a:visited class the next time the page is viewed. The user returns to this page, their browser uses the a:visited class, which has display:none. This has the effect of hiding the "New!" text.

If new replies are added to a topic, the URL of the anchor tag will change, thus bringing the "New!" indicator back into visibility.

Points of Interest

Note that this technique has several downsides as listed below, but for a simple solution it works. You would not want to use this where it is very important that "New!" means new.

Issues with this technique:

  • If the user clears their history, all items become "New!" again.
  • Different browsers may define "visited" differently and un-do visited links.
  • If a user looks at your page on a different computer, the visited links will not follow.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Barry Etter
Web Developer
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionHow To Send Sms Using Pin
semsp1-May-12 0:37
membersemsp1-May-12 0:37 
GeneralMy vote of 4 Pin
Donsw15-Apr-12 16:37
memberDonsw15-Apr-12 16:37 
GeneralRe: My vote of 4 Pin
semsp12-Jan-13 17:51
membersemsp12-Jan-13 17:51 
QuestionCSS? Pin
kakaitvn26-Aug-07 20:28
memberkakaitvn26-Aug-07 20:28 
Questionwhat is CSS Pin
siva_n1320-Jan-05 13:19
membersiva_n1320-Jan-05 13:19 
AnswerRe: what is CSS Pin
Anonymous20-Jan-05 13:21
sussAnonymous20-Jan-05 13:21 
GeneralRe: what is CSS Pin
Anonymous20-Jan-05 13:22
sussAnonymous20-Jan-05 13:22 
GeneralRe: what is CSS Pin
Anonymous20-Jan-05 13:23
sussAnonymous20-Jan-05 13:23 
GeneralRe: Pin
Anonymous20-Jan-05 13:23
sussAnonymous20-Jan-05 13:23 
GeneralSlight Improvement Pin
Bassam Abdul-Baki20-Jul-04 2:34
memberBassam Abdul-Baki20-Jul-04 2:34 
GeneralRe: Slight Improvement Pin
dzCepheus20-Jul-04 19:44
memberdzCepheus20-Jul-04 19:44 
GeneralRe: Slight Improvement Pin
Bassam Abdul-Baki21-Jul-04 2:14
memberBassam Abdul-Baki21-Jul-04 2:14 
GeneralRe: Slight Improvement Pin
Bassam Abdul-Baki23-Jul-04 9:45
memberBassam Abdul-Baki23-Jul-04 9:45 
GeneralBrilliant idea! Pin
John Cardinal19-Jul-04 17:04
memberJohn Cardinal19-Jul-04 17:04 
GeneralI Like It! Pin
Bassam Abdul-Baki19-Jul-04 13:36
memberBassam Abdul-Baki19-Jul-04 13:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.180621.3 | Last Updated 19 Jul 2004
Article Copyright 2004 by Barry Etter
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid