apply animation to any text in every html element - html

Question

I want to apply fade in effect to all text in a web page, but do I have to select every text element like this: h1, p, a, li{ animation: fade-in;} ? What if there is also text just within div "DIV TEXT".
Thanks a lot for your help!
div{
background: green;
}
#keyframes text-appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
h1, text{
animation: text-appear 2s linear;
}
<div>
DIV TEXT, no fade in
<h1>H1</h1>
<h1>H1</h1>
<p>P, no fade in</p>
<a>A, no fade in</a>
<svg viewBox="0 0 200 38" >
<text x="50%" y="50%" fill="red">SVG TEXT</text>
</svg>
</div>

Answer 1

This selector should work, Selects all elements that are not empty/only whitespace, and that don't have any other children:
div {
background: green;
}
*:not(:empty):not(:has(*)) {
animation: text-appear 5s linear;
}
#keyframes text-appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div>
DIV TEXT, no fade in
<h1>H1</h1>
<h1>H1</h1>
<p>P, no fade in</p>
<a>A, no fade in</a>
<svg viewBox="0 0 200 38">
<text x="50%" y="50%" fill="red">SVG TEXT</text>
</svg>
</div>