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')
}
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).