title: Changing link color on focus but not on click (either mouse or keyboard click)
body: <p>I want to change the color of a link when a user focuses on it by navigation to it using the TAB key.
  that's the easy part, as it's done by this:</p>
  
  <pre><code>a:focus{ color: red; }
  </code></pre>
  
  <p>the problem is, the link is also colored red when activated, e.g: when a user clicks the "ENTER" key or the left mouse click. </p>
  
  <p>How can I prevent this side effect and keep the coloring only when user focuses on the link using the "TAB" key ?</p>
  
  <p>I tried this:</p>
  
  <pre><code>a:focus{ color: red; }
  a:active{ color: blue; }
  </code></pre>
  
  <p>(blue is the default color)
  it didn't work, what happens is it first turned the link blue but then red in a slit second...</p>
  
  <p>I need this done of every link on my site so I don't want to use any complicated javascript code to do this and hoping to do this in CSS only.</p>
  
  <p>any suggestions ?</p>
  
  <p>edit: I also tried this:</p>
  
  <pre><code>a:active:focus{ color: blue; }
  </code></pre>
  
  <p>in order to capture a state in which the element is focused AND active so I can override a "focus" CSS.
  it didn't work either.</p>