Click here to Skip to main content
15,498,622 members
Articles / Web Development / HTML
Posted 18 Jul 2004


32 bookmarked

Simple "New" Indicator Using CSS

Rate me:
Please Sign up or sign in to vote.
4.67/5 (14 votes)
18 Jul 20043 min read
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

Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

QuestionHow To Send Sms Using Pin
semsp1-May-12 1:37
Membersemsp1-May-12 1:37 
GeneralMy vote of 4 Pin
Donsw15-Apr-12 17:37
MemberDonsw15-Apr-12 17:37 
GeneralRe: My vote of 4 Pin
semsp12-Jan-13 18:51
Membersemsp12-Jan-13 18:51 
QuestionCSS? Pin
kakaitvn26-Aug-07 21:28
Memberkakaitvn26-Aug-07 21:28 
Questionwhat is CSS Pin
Member 167116020-Jan-05 14:19
MemberMember 167116020-Jan-05 14:19 
what is CSS plz help me !!
AnswerRe: what is CSS Pin
Anonymous20-Jan-05 14:21
MemberAnonymous20-Jan-05 14:21 
GeneralRe: what is CSS Pin
Anonymous20-Jan-05 14:22
MemberAnonymous20-Jan-05 14:22 
GeneralRe: what is CSS Pin
Anonymous20-Jan-05 14:23
MemberAnonymous20-Jan-05 14:23 
GeneralRe: Pin
Anonymous20-Jan-05 14:23
MemberAnonymous20-Jan-05 14:23 
GeneralSlight Improvement Pin
Bassam Abdul-Baki20-Jul-04 3:34
professionalBassam Abdul-Baki20-Jul-04 3:34 
GeneralRe: Slight Improvement Pin
dzCepheus20-Jul-04 20:44
MemberdzCepheus20-Jul-04 20:44 
GeneralRe: Slight Improvement Pin
Bassam Abdul-Baki21-Jul-04 3:14
professionalBassam Abdul-Baki21-Jul-04 3:14 
GeneralRe: Slight Improvement Pin
Bassam Abdul-Baki23-Jul-04 10:45
professionalBassam Abdul-Baki23-Jul-04 10:45 
GeneralBrilliant idea! Pin
Member 9619-Jul-04 18:04
MemberMember 9619-Jul-04 18:04 
GeneralI Like It! Pin
Bassam Abdul-Baki19-Jul-04 14:36
professionalBassam Abdul-Baki19-Jul-04 14: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.