::selection not working correctly on line break

March 20, 2022

I am using ::selection to alter the color of the highlight, since the default blue doesn’t really work in my color theme. However, when I have multiline text with <br> (or \n from js, which just gets converted to <br>) the line breaks are always the default blue.

<!DOCTYPE html>
<html lang="en">
<body>
      <div class="selector">Try<br>selecting<br>me.</div>
</body>
<style>
.selector::selection {
    background-color: #8d8d8d;
}
</style>
</html>

How can I make all the selected text including line breaks the same color?

>Solution :

Add an additional .selector *::selection selector to the css that will define all child elements inside .selector.

<!DOCTYPE html>
<html lang="en">
<body>
      <div class="selector">Try<br>selecting<br>me.</div>
</body>
<style>
.selector::selection,
.selector *::selection {
    background-color: #8d8d8d;
}
</style>
</html>