Question

I’m using this code:

::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
::selection { background: #c92127; color: #fff; text-shadow: none; }

Now I want to use this on any element inside a certain div.

My code for my wrapper is

<div id="wrapper" class="Red">

So I went with this for my CSS selector

div#wrapper.Red::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
div#wrapper.Red::selection { background: #c92127; color: #fff; text-shadow: none; }

But this does not work. It does work when I just use the selection code at the top of this question though.

So my question is: Does ::selection apply to all child elements (i.e. my selector is wrong) or is this not possible?

Here is an example in response to BoltClock’s jsFiddle

http://jsfiddle.net/6DBhV/1/

Answer 1

Your div#wrapper.Red::selection styles will indeed not be inherited by the ::selection of any children (in your fiddle, it’s div#test::selection). Due to the way inheritance works in CSS, pseudo-elements cannot inherit from other pseudo-elements even if their real elements are related in some way as parents or children. The issue of nested selections was covered in much greater depth in this CSS WG mailing list thread.¹

The reason why your ::selection style works is because the pseudo-element is applied to all elements, including both of your <div>s.

An easy solution to this is to separate ::selection from the rest of your simple selectors with a combinator:

/* Notice the space here - the descendant combinator */
div#wrapper.Red ::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
div#wrapper.Red ::selection { background: #c92127; color: #fff; text-shadow: none; }

Updated fiddle

---

¹ _{This is also one of the reasons why ::selection was dropped from CSS UI 3. Here’s hoping it’ll return in UI 4 after it’s further tested and defined.}