将:: selection CSS应用于div

Question

When you apply a class with a particular color for the ::selection pseudoclass to a div, it only seems to effect the spans inside that div but not the rest of the text why is that? and is there a way to apply a custom selection color to a div. See the JSFiddle for an example of attaching a class with a ::selection color to both a div (which does not work as I would expect) and the body which does work as expected.

http://jsfiddle.net/m9ZxB/3/

relevant css:

.green ::selection{
  background:green;   
}

Answer 1

There's an old bug report on bugzilla which relates to your problem.

As you can see in comment 26 a selection is actually an extra anonymous element, that's why text-decoration of the surrounding anchor won't change its color since the selector only applies for this "child": <span>The word <span::selection>select</span::selection> is selected</span> .

and please also note

Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved (based on discussion in the W3C Style mailing list).

Visit this MDN post for more information