Use body::selection, i want to customize highlight color

Question

Why cannot use body::selection, when i want anything that can highlight to be the color i desired, anything include p img li h1

Examples here Now i want everything highlight to be RED color, but i am using body::selection, it never work

http://jsfiddle.net/kent93/nu6ju/

Answer 1

If you want to apply the selection background to all elements, omit the type selector:

::selection {
    background: red;
}

And for that matter, add ::-moz-selection so it works in Firefox too:

::-moz-selection {
    background: red;
}
::selection {
    background: red;
}

---

It was never decided how exactly the styles you set for E::selection for any element E should propagate to descendants of E. There's a much more in-depth discussion in the www-style mailing list. It is also for this reason that ::selection has been totally dropped from CSS3 with the latest LC revision of CSS3 UI; see this section, which says:

The ::selection pseudo-element has been dropped since it was dropped from Selectors after testing found interoperability problems and further details to explore/define.

My best guess is that browsers (at least Firefox) just don't apply the same rule to descendant elements. So if you apply the pseudo-element to body, then only body text will have the custom selection background; everything nested inside it won't have the selection background.