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/

Songsongbird

what is your question ? example works like a charm: body::selection { background-color: red; } does exactly what its supposed to do. – Protrude

my question is why it does change img p li h1 highlight color into red color also? – Songsongbird

because everything is nest inside body tag – Songsongbird

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.

Emmalynn

maybe you is right , cause i have tried a lot of way to make it, but no one make me feel happy – Songsongbird

Answer 2

If you want to stop cascading, you can add

body *::selection { background: inherit; }

So only text on the top level will be selected with red. Example: http://jsfiddle.net/nu6ju/4/

Protrude