How can I style :visited <a> elements that use React's onClick="" instead of href=""?

Question

• The website has a table.
• In the table, I get data from the Firestore (and display this data to the user). Some cells in the table may link to other pages on the site (which are also implemented as a table).

Since there is a lot of information, the user can get confused which links they followed and which they have not touched; thus, I would like to mark with a different color when hovering over those links that the user has already visited.

By default, my link color is black, and if you hover over the link, it lights up blue. I would like the links visited by the user to be highlighted in a different color.

Below is an example of how I write the route

export default function DeviceCell({ device }) {
    const router = useNavigate()

    return (
        <TableRow>
          
            <TableCell>
                <a className="page-links" onClick={() => router(device.id)}>List of users</a>
            </TableCell>
        </TableRow>
    );
}

Also my.css file

.page-links {
    color: #3A3A3F;
    text-decoration: none;
    border-bottom: 1px black solid;
    border-bottom-width: 2px;
    cursor: pointer;   
}
    
.page-links:hover {
   color: #485FED;
   border-bottom: 1px #485FED solid;
   border-bottom-width: 2px;
}

Answer 1

a.page-links:visited:hover { color: red;} Should work.

Answer 2

Is it possible it's simply the ordering?

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

.page-links{
    text-decoration: none;
    border-bottom: 1px black solid;
    border-bottom-width: 2px;
    color: #3A3A3F;
    cursor: pointer;   
}

.page-links:visited { 
    color: red; 
} 

.page-links:hover{
    color: #485FED;
    border-bottom: 1px #485FED solid;
    border-bottom-width: 2px;
}

Answer 3

Your problem can be solved by associating one more function that will change the color of the link when the user clicks on the link

onclick = existing-function; changeColor() => {
    document.this.style.color = "color";}

Use a semi-colon to separate the two functions.

Answer 4

There are two scenarios based on your question as you said " After clicking on the link and returning to the page, when you hover over the link, it still lights up blue "

Do you want to preserve the clicked links in a single session?

• If that's the case, then you need to store your visited links somewhere on the browser like cookies or localStorage or SessionStorage and check against the list on render. If exists change the CSS else use the different one.
• You also need to have logic on the list size stored. How big it should be and how long it may be stored on the browser(expiration)

---

Do you want the visited links to persist across multiple sessions?

• If that's the case then you need a bit of help from the server side as well. You need a mechanism to store the state on the backend (storage can be your choice - NoSql db, SQL db etc) and then check against the list for the specific user while rendering the page.
• You need a mechanism to identify users. If they are logged in, its easy and you can use their user id. If the users are anonymous, the either you can create a cookie to identify users or a different mechanism to generate a unique user id.

Hope this helps

Answer 5

If we want to use:visited CSS pseudo selector, basically we have to create browser history because visited pseudo selector depends on it. Way to do it without creating real navigation with HTML anchor element is History API . To solve this issue, we have to add symbolic href to our link for pushing history states and preventing default HTML link navigation event behaviour.

An appropriate example can be found on this code sandbox and sandbox preview

export default function DeviceCell({ device }) {
const router = useNavigate()
const handleClick = (e) => { 
   // Prevent default HTML Anchor Event
   e.preventDefault();
   window.history.pushState({ data: device.id }, `Data: ${device.id}`, e.target.href);
}
return (
    <TableRow>
      
        <TableCell>
            <a href={`/user/${device.id}`} className="page-links" onClick={() => router(device.id)}>List of users</a>
        </TableCell>
    </TableRow>
)}

CSS:

a.page-links:hover:visited {
  background-color: #dc2626;
  color: white;
}