Adding class selector after pseudo selector in 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).