Combining Pseudo-classes in CSS?

Question

If I need 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?

Answer 1

Yes, you can combine pseudo-classes 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.

Answer 2

 .container:nth-last-child(2):not(:first-child) {
    background-color: red;
 }