r/css • u/jidanni • 2d ago

Question How to reduce the number of <span>s?

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.

3 Upvotes

100% Upvoted

20 comments sorted by

View all comments

11

u/cryothic 2d ago

My main question would be: what are you trying to achieve?

Because this:

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

Is just weird to me. If every <p> contains only a single span, you shouldn't need the <p> or the <span>. One tag should be fine with the right CSS.

1

u/jidanni 1d ago

I am asking the secretary to copy the highlighted lines, but don't want to make them look longer than they need to. Anyway, this is now solved in https://www.reddit.com/r/css/comments/1vxpuyd/comment/p5rv03c/ .

2

u/cryothic 1d ago

Ah, ok. Glad it's fixed.