Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Combining Pseudo-selectors in CSS?

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?

like image 763
el Dude Avatar asked Jul 03 '13 18:07

el Dude


People also ask

Can you combine pseudo selectors?

If you're talking about pseudo-classes, then yes, you can combine them in any order.

Can pseudo-elements and pseudo classes be combined?

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.

Can you use multiple pseudo class selectors with an element?

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 ( : ).

Can CSS classes combine with pseudo classes?

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.


1 Answers

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.

like image 185
BoltClock Avatar answered Oct 18 '22 03:10

BoltClock