How to make CSS revert to the unvisited style after leaving a visited page in tag?

Question

a.navigation:link {color: white; text-decoration: none;
    padding: 20px 20px 20px 20px;
    border: 0.5px solid white;
    border-radius: 70px 70px;}  

a.navigation:visited {color: lightgreen;
    padding: 20px 20px 0px 20px;
    border: 0.5px solid lightgreen;
    border-radius: 70px 70px 0px 0px;}

The css above is what I'm using for the unvisited page and visited page. I want a visited page that has been left to revert to unvisited css style.

i'll also want to know how i can make the padding on :visited work. presently it is not working. it is using the :link padding. — Olu F, Oct 18 '16 at 16:47
As it is a security issue, you can't change padding (or border) with the `:visited` pseudo — Asons, Oct 18 '16 at 17:11
yes i realise that. but i was hoping there is a way to go around it. all i wanted is for the visited nav to have a different shape. — Olu F, Oct 18 '16 at 18:56
Nope. not using `:visited` ... you can though, by using a script, create your own solution and store clicks in [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) or [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) ... or just add a class, using script, which will be gone after page reload — Asons, Oct 18 '16 at 19:14
I think I must be missing something as I don't fully understand what you're asking. If you click a link to another page, that link will be marked as `:visited` when you return to the first page so, to have the link appear the same as an unvisited link when you leave the 2nd page and return to the first, simply ditch the `:visited` rule altogether. — Shaggy, Oct 18 '16 at 20:25
@Shaggy i visit the page i want the :visited css style to take effect but when i leave the page i want it to revert to the original :link css style. — Olu F, Oct 18 '16 at 20:41
What you can do is for hover. Use navigation:visited:hover and/or navigation:visited:active — , Oct 18 '16 at 22:06
Colors used for visited vs un-visited depend on the browsers history. You would have to clear that in javascript using the history object and document.onbeforeunload. See http://stackoverflow.com/questions/8969878/in-javascript-how-do-i-clear-the-back-history-1 — Peter Brand, Oct 18 '16 at 22:45
are you trying to style the nav item for the current page in the browser, and no others? that's a lot different than :visited. — andi, Oct 19 '16 at 21:38
Wait, when do you want visited styles to actually appear? Or never? — , Oct 20 '16 at 05:37

score 1 · Answer 1 · answered Oct 18 '16 at 22:18

I usually use the same settings for :link and :visited, like this:

a.navigation:link, a.navigation:visited {
    color: white; text-decoration: none;
    padding: 20px 20px 20px 20px;
    border: 0.5px solid white;
    border-radius: 70px 70px;
}

And I also use the same settings for :hover and :active:

a.navigation:hover, a.navigation:active {
     [... your settings ...]
}

score 0 · Answer 2 · edited Oct 18 '16 at 17:01

0

Solution

The best option is to disable that completely - Like so:

a:visited {
text-decoration: none;
}

This will remove it from showing the default visited color.

Refrences

W3Schools

edited Oct 18 '16 at 17:01

amanuel2

4,508
4
36
67

answered Oct 18 '16 at 16:58

jeffrey crowder

91
11

does this not mean that the :visited will look exactly like :link when the page is visited. i want the :visited to look different when the page is visited but revert to :link when the page is left. – Olu F Oct 18 '16 at 19:01
It should, anyways. You could force clear cache, or something alike, but idk exactly if this does what you want. Adjust to your pleasing. The reason I commented was because of my new project I have been working on, I wanted the link to not look like it where it says "Powered By Webmaintain" I didnt want the sloppy hyperlink. (https://jdc20181.github.io/WebMaintain/ ) There are several listed there all are the same thing with the link at the bottom. The text decoration that occurs when a link is clicked on is nothing. It stays the same as the given color. You could also try the Visited Property – jeffrey crowder Oct 19 '16 at 00:18

score 0 · Answer 3 · answered Oct 27 '16 at 13:31

<!DOCTYPE html>
<html>
<head> <title> HOME </title> 
<style>   
    #Header {background-color: rgb(137,184,211);
    background-repeat: no-repeat;
    background-position: center top; 
    background-size: 1400px 100px;
    padding-top: 0px;
    padding-bottom: 100px;
    padding-left: 0px;} 
    p.navigation {position:absolute;
          margin-left: 800px;
          margin-top: 45px;}
    a.current:link, a.current:visited, a.current:hover, a.current:active 
      {color: lightgreen;
       padding: 20px 20px 0px 20px;
       border: 0.5px solid lightgreen;
       border-radius: 70px 70px 0px 0px;} 

    a.navigation:link {color: white;
     text-decoration: none;
     padding: 20px 20px 20px 20px;
     border: 0.5px solid white;
     border-radius: 70px 70px;}

    a.navigation:visited, a.navigation:hover, 
    a.navigation:active 
     {color: lightgreen;
       padding: 20px 20px 0px 20px;
       border: 0.5px solid lightgreen;
       border-radius: 70px 70px 0px 0px;}
</style>
</head>
    <body>
    <div id= "Header"> 
    <p class= "navigation"> 
    <a href= "home.html" target= "_self" class= "current"> HOME </a>
    <a href= "aboutus.html" target= "_self" class= "navigation"> 
    ABOUT US </a>  
    <a href= "archive.html" target= "_self" class= "navigation"> ARCHIVE 
    </a>   
    <a href= "contactus.html" target= "_self" class= "navigation"> 
    CONTACT US </a> 
    </p>
    </div>
    </body>
    </html>

Thank you everybody that suggested a solution. I valued and checked all suggestions. The final solution I came up with is seen above. it meet my need. Thank you again. — Olu F, Oct 27 '16 at 13:35

How to make CSS revert to the unvisited style after leaving a visited page in tag?

3 Answers3

Solution

Refrences