Combining Pseudo-selectors in CSS?

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

Yes, it is the recommended way to do it, see the w3c about pseudo classes : http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

EDIT : as BoltClock pointed out, this link if for CSS2, this is the document for CSS3 : http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act