HTML link disable or change color property after visiting one time

HTML & CSS
1

I have below simple code to change the color of link. But the problem is after visiting the link the color of the link stays the same Red. it does not change to Red. Am i doing anything wrong? or is there any better way to tell user that they have already visited particular link.

<?php include_once("control_header.html") ?>
<body bgcolor="#E7FBA7">
<title>CC_jobs</title>


<style>
div {
    border: 1px solid black;
    margin: 00px 00px 00px 0px;
    background-color: lightblue;
}
</style>
<style>
/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;!important;
}

/* mouse over link */
a:hover {
    color: Hotpink;
}

/* selected link */
a:active {
    color: blue;
}
</style>
<br>

<font face="verdana" size="3">
<a href = "#" pageurl="cc_real/3GBCJUK5B10I32J9O2EJNNQ339GPKH/3GBCJUK5B10I32J9O2EJNNQ339GPKH.html">1)FireTrucks Review </a> <br>
<a href = "#" pageurl="cc_real/3I6C7P7ISC5VAEM8S6EI9GU66Z5Z67/3I6C7P7ISC5VAEM8S6EI9GU66Z5Z67.html">2)English copy editing for short sentence</a> <br>
<a href = "#" pageurl="cc_real/348F9UQ1NKKIFY3D4FFQGFTBJ5EI25/348F9UQ1NKKIFY3D4FFQGFTBJ5EI25.html">3)Web Scrape </a> <br>
2

You might be better posting in the CSS section, other than the include there’s no PHP content here as far as I can see.

This seems the wrong way around though:

I haven’t done much CSS for a while, but it seems that the style for the unvisited link is red, and for the visited one it is green. So it’s not surprising to me that it is green after you have visited the link.

3 
/* visited link */
a:visited {
    color: green;!important;
}

What else did you expect a visited link to do, given this piece of code?

1 Like
4

ohhhh sorry I made mistake . it stays the same red. the color of the unvisited link.

5

Not in my browser (Firefox), the links turn green after one is clicked.
But then anything can happen from one browser to the next when the code is not validated.

6

yess I asked one of my friend also to check and it same happend to him. link changed a color.

and what you mean by code is not validated ?

7

Follow the link I posted above and you will find a tool to check your html.
There is also a validator for css too.

Until it is free from validation errors you cannot expect things to work as expected.

8

I’m getting mixed messages. Sometimes you say the links change (to green), sometimes you say it stays the same (red). In the screen shot, the links are blue and green. :confused:

9

sorry for misunderstanding … i was trying different possibilities and try to see with different color. which Image I shared you it´s another same kind of page, not the same which I shared the code.
I tried with different function also to disable the link but it seems it does not work in my browser may be.

10

If you want people to help you, it’s no good changing the goalposts all the time.

11

ravicepatel,

Show us a “working page” with the code that you are using that demonstrates the problem.
OR post a link to the test page on your web site. We must see the real code.

A “working page” starts with a <!doctype>, includes the <head> tags and whatever they contain including CSS, then the <body> tags with examples of the links that are not colored correctly by the CSS, finally ends with </html>. In other words, it is a minimal, properly coded, valid page that demonstrates the problem so we can see in our browser what you see in your browser.

You may also need to include screen shots or drawings that show what you wish to see… how you want the links to behave.

Additional information for us:

(1) Do you use the !important modifier very often when you write code?

(2) Do you know the meaning of the CSS cascade?

(3) Do you understand the concept of specificity?

(4) Do you know how to validate your HTML and CSS?

https://validator.w3.org/nu/ (HTML)

https://jigsaw.w3.org/css-validator/ (CSS) (same as @SamA74 posted).

Why is validation important? This exampe from your first post is invalid. There should be a space, not a semicolon, between “green” and “!important”. HOWEVER, !important should not really be used here at all because once a link has been visited, the hover, focus and active colors cannot override it. The coloring will no longer change on hover, focus, or active.

 

Demo.

Copy the following code to a file with an html suffix and open it in your browser.

The links in the following “working page” are dummys. Click them to see the coloring change.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>anchors</title>
<!--
https://www.sitepoint.com/community/t/html-link-disable-or-change-color-property-after-visiting-one-time/251722/
ravicepatel
Jan 29,2017 1:37 PM
-->
    <style type="text/css">
p {
    font-size:1.5em;
    font-weight:bold;
}
a {
    display:inline-block;
    border:3px solid transparent;
    border-radius:12px;
    padding:3px 6px;
}
a:link {
    color:blue;
}
a:visited {
    color:purple;
}
a:hover,
a:focus {
    border-color:blue;
}
a:active {
   color:red;
   border-color:red;
}
    </style>
</head>
<body>

<p>To learn more about HTML and CSS, <a href="">go here and read.</a></p>
<p>To learn more about HTML and CSS, <a href="/">go here and read.</a></p>
<p>To learn more about HTML and CSS, <a href="#">go here and read.</a></p>

</body>
</html>
1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.