使用:: selection选择器更改所有子项的选择颜色

Question

I have two div elements with any type of children in it (like input and span ) and I want to change the selection color of all child elements in my first div to red and in the second div to yellow.

The following does not work:

#my-div-1::selection
{
  background-color: red;
}

#my-div-2::selection
{
  background-color: yellow;
}

I can not use the selector like this:

::selection
{
  background-color: yellow;
}

because this would overwrite the color of the second div and apply to the whole document.

Answer 1

You need to select all children elements where the selector should apply to. You can instead write the following:

#my-div-1 *::selection
{
  background-color: red;
}

#my-div-2 *::selection
{
  background-color: yellow;
}