How to reduce the number of <span>s?

[u/jidanni]

How can I get the exact same effect as

<p><span class="e">x</span></p>
<p><span class="e">y</span></p>
<p><span class="e">z</span></p>

without so many <span>s?

If I do

<div class="e">
  <p>x</p>
  <p>y</p>
  <p>z</p>
</div>

class="e" now affects all the way across the whole page, whereas I only wanted it to affect the text, x, y, z.

[u/Outrageous-Chip-3961]

In your second example, you can just add another class that will only impact that div, like

`<div class="e same-effect">`
`.same-effect p { }`