How to style ::selection pseudo element in a styled component?

Question

I want to do that with a styled component:

.jTHnFZ ::selection {
    background-color: pink;
}

I write this styled component:

const MyDiv = styled.div`
    ::selection {
        background-color: pink;
    }
`

But the result is:

.jTHnFZ::selection {
    background-color: pink;
}

The result is the same with this styled component:

const MyDiv = styled.div`
    & ::selection {
        background-color: pink;
    }
`

The only way I found to attibute a color to the ::selection pseudo element is to do this:

const MyDiv = styled.div`
    *::selection {
        background-color: pink;
    }
`

And the result is then:

.jTHnFZ *::selection {
    background-color: pink;
}

It works but is there a better way to do it, avoiding the *?

I don't understand. can you show your code completely? I and others can help better. — Arman Ebrahimi, Feb 24 '22 at 15:22
Thanks for your help! My project is large and contains a lot of files, so I have simplified this code [in this repository](https://github.com/centvingt/nested-pseudo-element-in-styled-component). But in this repository `& ::selection {...}` works fine (this nested pseudo element is in [this file](https://github.com/centvingt/nested-pseudo-element-in-styled-component/blob/main/elements/MyDiv.jsx)). — Vincent Caronnet, Feb 24 '22 at 19:18
So the problem is not with the styled components but with my project, [here is its repository](https://github.com/centvingt/nested-pseudo-element-in-styled-component-doesnt-work). The file with the problematic nested pseudo element [is here](https://github.com/centvingt/nested-pseudo-element-in-styled-component-doesnt-work/blob/main/elements/LayoutElements.jsx). — Vincent Caronnet, Feb 24 '22 at 19:18

score 1 · Answer 1 · answered Feb 25 '22 at 05:02

1

Try this:

Please remove space after &:

const MyDiv = styled.div`
    &::selection {
        background-color: pink;
    }
`

Note to: https://www.reddit.com/r/reactjs/comments/nz8gt9/using_the_selection_css_attribute_using_styled/

answered Feb 25 '22 at 05:02

Arman Ebrahimi

`&::selection` selects the `div` itself, whereas i want to select the descendants of that `div` – Vincent Caronnet Feb 25 '22 at 16:53
In fact, the correct selector to select descendants of the `div` is `& ::selection` (with a space between `&` and `::selection`). It works fine when I try this in a new project but it doesn't work in my current project – Vincent Caronnet Feb 25 '22 at 16:58
@VincentCaronnet Tried this?: `& > ::selection` – Arman Ebrahimi Feb 26 '22 at 09:10
The CSS selector `& > ::selection` would select only direct children whereas I want to select all descendants. The right syntax to do that is `& ::selection` but it doesn't work in my project – Vincent Caronnet Feb 26 '22 at 13:04
1

@VincentCaronnet Why not use `& *::selection`? you said `It works but is there a better way to do it, avoiding the *?` – Arman Ebrahimi Feb 26 '22 at 13:12
I'm suspicious of the universal selector which might have performance issues. But it seems that in reality this performance impact is negligible, so I'm going to stick with the universal selector. – Vincent Caronnet Feb 26 '22 at 18:56

1 Answers1