Question 303381 in Html Question posted in
Some basic documentation can be found here.

Html – Style download link <a> after download?

How can I change the download link color after it was downloaded?
I tried with the visited attribute, but it doesn’t work (it do work only with regular links and not with download docs):

Thanks 🙏🏼

<a href="http://example.com/files/someFile.csv" target="_blank">
    http://example.com/files/someFile.csv
</a>

with the visited style:

a:visited {
    color: pink;
}
Tags:

2

Answers


  1. 0

    As other pointed out, in order to have the :visited work properly, you have to create an history entry for that link. One way to do this would be to add a target="_blank" attribut to your link. This will make the link open in another page, which will create an history entry.

    The stackoverflow embedded snipet won’t let you open a new window directly, so you have to ctrl+click on the link. This won’t happen on a real page.

    Also, PLEASE NOTE that the snippet link WILL DOWNLOAD AN ACTUAL FILE taken from https://file-examples.com. Be aware of that before clicking the link.

    a:visited {
    color: pink;
}
    <a href="https://file-examples.com/wp-content/storage/2017/02/file-sample_1MB.doc" target="_blank">
https://file-examples.com/wp-content/storage/2017/02/file-sample_1MB.doc
</a>
    Login or Signup to reply.
  2. 0

    As others have already mentioned, HTML or CSS do not know if something is actualy downloaded or not. You can only detect that the link was clicked upon, and according to that add some class which will show that it was used. For that you can use javascript, for example with jQuery this could look like this:

    $("a.download").click(function(){ $(this).addClass("downloaded"); });

    a.downloaded { color:pink;}

    If you want to make things persistant accross page reloads, you could use browser localStorage and save the id of the anchor that needs to be marked as downloaded file, and on page load use that a#id to set the class again to downloaded.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search