Adding class selector after pseudo selector in css
Is it possible to add a class selector after the pseudo class to my CSS rule like:
a:hover.my-class {
background: red;
}
So if I hover on my anchor tag <a class="my-class">link</a>
, will it be red in all browsers? is this valid CSS?
Why do I need it
I have this problem because it is being generated from a mixin in SASS:
@mixin focus($classA, $classB) {
&:focus {
&#{$classA} {
background: blue;
}
&#{$classB} {
background: yellow;
}
}
}
a {
@include focus('.class-a', '.class-b')
}
source to share
There is no such thing as a "pseudo selector".
There are two functions in selectors that start with "pseudo": a pseudo-class and a pseudo-element. They are completely different functions with different syntax rules.
You can put the class selector after the pseudo-class, for example :hover
, since they are both simple selectors and the order of the simple selectors in a compound selector does not matter (type and generic selectors are the only exceptions to this rule - they should always come first, for example 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 must be made due to the common use of the term "pseudo-selector" which incorrectly groups both functions into one general term (and frankly, the question gets more complicated than it really should be) ...
source to share
Yes, you can add a class to the pseudo class.
This css is valid and working:
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 the class.
.hoverme:hover {
background:blue;
color:white;
}
<a href="#" class="hoverme">Hover me!</a>
You can check if your CSS is valid on the W3C CSS Validator page .
source to share