CSS selector suggestion needed

Question

I am making a box with background color in it and lots of content over it for that I have to change text color off all texts inside box opposite to background color i have used filter:invert(98%) now the problem is it is working good but making other images and icons inverted as well

main thing

now I wanted to select only elements with text with css since I am working with wp react for blocks I don't have much control with js so css solution is required for that thing

note that there are lots of elements inside main element in real project with various names

here is a example code below

 .main { background:black; } .main > * { filter:invert(80%); }

 <div class="main"> <div class"text1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets conta </div> <hr> <div class"another_text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets conta </div> </div>

Answer 1

it's simple, you can write css this way as well .main{ background:

 span{ color:white; padding:4%; background:#000000ad }

 <div class="test"><span>Hello World</span></div>

}