Adding class selector after pseudo selector in css - css

Question

Can I add a class selector after a pseudo class in my CSS rule, e.g:
a:hover.my-class {
background: red;
}
So if I hover over my anchor tag, <a class="my-class">link</a>, will the background be red in all browsers? is this valid CSS?
Why I need this
I have this problem because it is generated from a mixin in SASS:
#mixin focus($classA, $classB) {
&:focus {
&#{$classA} {
background: blue;
}
&#{$classB} {
background: yellow;
}
}
}
a {
#include focus('.class-a', '.class-b')
}

Answer 1

There is no such thing as a "pseudo-selector".
There are two features in selectors that start with "pseudo-": pseudo-class and pseudo-element. They are completely different features with different syntax rules.
You can place a class selector after a pseudo-class such as :hover, because they are both simple selectors and order of simple selectors in a compound selector does not matter (type and universal selectors are the only exceptions to this rule — they always have to come first, such as the a in your example).
You cannot place a class selector after a pseudo-element such as ::before, because a pseudo-element is not a simple selector. Your question may not be about pseudo-elements, but this distinction has to be made because of the common use of the term "pseudo-selector", which incorrectly groups both features into a single umbrella term (and frankly makes the question more complicated than it really needs to be).

Answer 2

Yep, you can add a class to a pseudo class.
This css is valid and it works:
a:hover.hoverme {
background:blue;
color:white;
}
This works too:
a.hoverme:hover {
background:blue;
color:white;
}
Or you can add a pseudo class after a class.
.hoverme:hover {
background:blue;
color:white;
}
Hover me!
You can check if your CSS is valid at W3C's CSS Validator page.