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 *?

Answer 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/