I mean if I need, for example, selected text in a hovered link be red, could I use the following code in CSS style?
.abc:hover:selection{color:red}
and
<a href="123" class="abc">4567890</a>
Would that link, when I select part of it, become red colored when I hover it and is this correct syntax for such pseudo-classes combining?
If you're talking about pseudo-classes, then yes, you can combine them in any order.
Combining pseudo-classes and pseudo-elementsIf you wanted to make the first line of the first paragraph bold you could chain the :first-child and ::first-line selectors together. Try editing the previous live example so it uses the following CSS.
You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement. Note: As a rule, double colons ( :: ) should be used instead of a single colon ( : ).
Combining pseudo classes with CSS classesIt is possible to combine pseudo classes and regular CSS classes. This combination lets you style elements that have specific classes and also react to certain external factors.
If you're talking about pseudo-classes, then yes, you can combine them in any order.
Except in this case, ::selection
is not a pseudo-class, it's a pseudo-element that's not part of CSS1 or CSS2, or any current spec for that matter. And this is where the term "pseudo-selector" falls short, because they're two completely different things.
The correct syntax is a single colon for :hover
and double colons for ::selection
, and unlike pseudo-classes, pseudo-elements must always come last:
.abc:hover::selection{color:red}
And even then, because of the way ::selection
works (or doesn't), it's not guaranteed to actually have an effect in browsers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With