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: a:focus{ color: red;} Code (markup): 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. How can I prevent this side effect and keep the coloring only when user focuses on the link using the "TAB" key ? I tried this: a:focus{ color: red;} a:active{ color: blue;} Code (markup): (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... 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. any suggestions ?
Because when you click it with the mouse, it achieves :focus - your CSS is doing exactly what it's meant to do. If you want to NOT have this effect, only way to achieve it is via javascript.
TECHNICALLY: :active -- it's clicked on and either scripting or the browser is processing it. :focus -- it's been moved to by the keyboard :hover -- the mouse is over it. :visited -- you've followed it's href. BUT -- some legacy browsers use :active for both keyboard AND it's currently clicked, which is why it's good practice to just use :active, :hover and :focus TOGETHER for the same state / effect. Though what are you doing with it where it matters? Are you using it to intercept for scripttardery, or is it pointing to a link. If the latter it shouldn't be on screen long enough to matter, if the former, are you cancelling the event? Are you hooking with addEventListener and/or attachEvent, or are you using the stupid malfing "onevent" nonsense in the markup? Either way if it's an anchor and it staying in the :active state makes ANY difference, it's likely you're doing something wrong somewhere else.... Also, check your value for :visited -- you might be seeing that instead.