It seems I understand the privacy-restrictions of visited links, but I can't understand why my code doesn't work properly.
Could be tested here: https://jsfiddle.net/xqLvyrnb/
<style>
div { padding: 1em; }
.inner { background-color: greenyellow; }
.outer { background-color: yellow; }
a:link { color: rgb(0, 138, 206); }
a:visited { color: rgb(180, 0, 180); }
</style>
<div class="outer">
<div class="inner">
<a href="https://gooooooooogle.com">Probably unvisited link</a>
</div>
</div>
<div class="outer">
<div class="inner">
<a href="https://stackoverflow.com">Probably visited link</a>
</div>
</div>
<script>
// Uncomment one of these 2 lines:
//var target_elements = document.querySelectorAll('.inner a:link'); // Works
//var target_elements = document.querySelectorAll('.inner a:visited'); // Doesn't work!
for (i = 0; i < target_elements.length; i++) {
target_elements[i].parentNode.parentNode.style.backgroundColor = 'gray';
}
</script>
Why it's strange for me? Because we don't use styling for a:visited
. We use styling for parent element (and it doesn't work). How it could be fixed?