'Purple for visited hyperlinks unless buttons

The design is for hyperlinks to be in purple if they have been visitied before. However buttons are also hyperlinks and their colors should not be changed.

The following css code is not working properly:

a:visited:not(.button),
a:visited:not(.tcm-btn) {
// a:visited {
  color: purple;
}

//a.button:visited {
//   color: #fff;
//}

//a.tcm-btn:visited {
//   color: #fff;
//}

If the comments (denoted by //) are removed and, comments are applied to the first two lines instead, everything works fine.

However, the method that works is not desirable. Although the buttons may be white today, they may not be tomorrow.

Can the desirable design be implemented by changing syntax somehow?

Edit - Add HTML

As per request, HTML is below:

      <a href="/index.html" style="display: inline" class="button">⌂ Home</a>
      <a href="/about.html" style="display: inline" class="button">❓ About</a>
      <a href="/answers.html" style="display: inline" class="button">✅ Answers</a>
      <a href="/programs.html" style="display: inline" class="button">💻 Programs</a>

      <!-- The Cookie Machine - Hidden Button -->
      <a href="#0" class="tcm-btn">tCM</a>
cssanchor


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions