avoid css filter invert changes in div::selection

Question

* ::selection {
  background: #000;
  color: #fff;
}
.a, .b {
  background: red;
  color: yellow;
}
.a {
  filter: invert(1);
}
.a::selection {
  filter: invert(1);
}

<div class='a'>
The amount of the conversion, specified as a number or a percentage. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.
</div>
<br/>
<div class='b'>
The amount of the conversion, specified as a number or a percentage. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.
</div>

I have two div's that contains some texts. Both div have separate classes. I want to apply the filter:invert(1) in .a class. At the same time ::selection color should not be inverted in .a class. I tried this above code. But, It didn't work. I tried .a :not(::selection) too. It also won't work. Any way to solve this?

Answer 1

You could just switch the colors for a selection within .a - so that when the whole content of that element gets inverted, you get the colors you want again.

* ::selection {
  background: #000;
  color: #fff;
}
.a, .b {
  background: red;
  color: yellow;
}
.a {
  filter: invert(1);
}
.a::selection {
  color: #000;
  background: #fff;
}

<div class='a'>
The amount of the conversion, specified as a number or a percentage. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.
</div>
<br/>
<div class='b'>
The amount of the conversion, specified as a number or a percentage. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.
</div>