I must highlight a specific link based on the user's action

Question

Is there a way to dynamically color links based on user interaction? For instance, let's say I want to specify the color for unvisited links:

  a.newlink:link  {
      color: red;
    }

<a href="/privacy" target="_blank" class="newlink">New link</a>

However, this method doesn't seem to be working. Can anyone provide some assistance?

Answer 1

Answer №1

When the class name is added to the same a tag, the corresponding rule should be a.className.

  a.newlink:link  {
    color: red;
  }

For instance

a.newlink:link  {
    color: green;
  }

<a href="/privacy" target="_blank" class="newlink">Test</a>

Answer 2

When the class name is added to the same a tag, the corresponding rule should be a.className.

  a.newlink:link  {
    color: red;
  }

For instance

a.newlink:link  {
    color: green;
  }

<a href="/privacy" target="_blank" class="newlink">Test</a>

Answer 3

.freshlink:link  {
        color: blue;
    }

<a href="/privacy-policy" target="_blank" class="freshlink">fresh link</a>

Answer 4

.freshlink:link  {
        color: blue;
    }

<a href="/privacy-policy" target="_blank" class="freshlink">fresh link</a>

Answer 5

Simply use the :not(:visited) selector in your CSS code to style a link without adding any extra classes or tags:

a:not(:visited) { 
  color: red;
}

<a href="/privacy" target="_blank">Link</a>

Feel free to try it out and see the difference it makes to your design. Hope this tip comes in handy!

Answer 6

Simply use the :not(:visited) selector in your CSS code to style a link without adding any extra classes or tags:

a:not(:visited) { 
  color: red;
}

<a href="/privacy" target="_blank">Link</a>

Feel free to try it out and see the difference it makes to your design. Hope this tip comes in handy!