Multiple :selectors on one CSS element?

Question

I am stylizing a CSS element, and I was wondering if I could use multiple :selectors on one CSS element.

For instance:

p:hover:after {
    content: "Hello!";
}

Because, when I want the p to be hovered over, I want the :after selector to also be called.

Answer 1

That specific example is completely valid, it works as demonstrated here .

As of now, the main limitation(s) pertaining to pseudo elements, is that:

CSS3 Selectors - 7. Pseudo-elements (reference)

Only one pseudo-element may appear per selector , and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector .

Thus, neither of the following selectors would work: p:hover:after:after , p:after:hover

There is no limit on the number of simple selectors that can be chained together within the selector. And as @BoltClock states in the comments, there can only be one type selector or universal selector.

CSS3 Selectors - 4. Selector syntax (reference)

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector .

Here is a relevantly long selector that works: (example)

#parent:first-of-type:first-child > .child:last-child p:not(#element):not(#otherelement):hover:after

Answer 2

Multiple dynamic pseudo-classes are permissible.

An example of combining dynamic pseudo-classes:

 a:focus { background: yellow } a:focus:hover { background: white } 

The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover.

Illustration: http://jsfiddle.net/BhKuf/ (remember to hover)