css ::selection tag isn't working properly

Question

I want to use the ::selection CSS tag on my website but every time I use it and try it live, there are some highlighted parts that keep behaving normally. That happens with spaces and some other stuff. Do you know why and how can I fix this?

http://jsfiddle.net/o2bbog66/

Answer 1

It's worth noting that ::selection was removed from the Selectors Level 3 Specification and should logically be avoided until Pseudo-Elements Level 4 is supported by modern browsers. For this reason, you may witness strange issues on browsers which did implement the Selectors Level 3 version of the pseudo-element.

7.3. Blank

This section intentionally left blank. (This section previously defined a ::selection pseudo-element.)

The MDN article on ::selection goes further by quoting:

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.

The problem you're having here is most likely caused by the same nested elements mentioned above.