Differentiate between :focus via tab-key and :focus via click in CSS -

although quite answer question "can't done" i'd sure , ask guys here.

i have rather typical scenario in want enable tabbing through website (i.e. using tab key on keyboard). item user has tabbed upon should marked visually via css. far, good. this, obviously, demands focus-pseudo class:

a {     color: #000;      &:hover {         color: lighten(#000, 10%); // discreet change     }      &:focus {         background-color: green; // extreme change     } } 

but want apply style solely when user tabs through page. when user hovers or clicks element style should different.

example: user hovers or clicks anchor. visual aid can discreet because user knows element has interacted upon. when tabs through page can not sure , styling should more drastic.

the problem having is: element gets focus-styles applied on on both tabbing page , clicking on it.

is there css-only way apply styles solely when element got focused via tabbing?

again, pretty sure not possible, sure have asked question.

the :focus pseudo-class not discriminate based on how element entered focus in first place. indeed, not possible css. @ least you'd need annotate element on focus via event handler.

the :hover , :active pseudo-classes won't of here since former applies when mouse pointer on element , latter applies when mouse button down, i.e. neither state persists way :focus does, since element remains in focus after mouse pointer has left element, making indistinguishable element received focus via tabbing.