Does the CSS3 ::selection pseudo-element apply to all child elements as well?

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

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/

Problem courtesy of: Undefined

Solution

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
. 1

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


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

1

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.

Solution courtesy of: BoltClock

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Does the CSS3 ::selection pseudo-element apply to all child elements as well?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录