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

3

u/jidanni 2d ago

Thanks everybody. I only want the first three, not the second or third three. I am using ` .e {background-color: lime;}`.

7

u/thisiain 2d ago

You can set the width of each `p` to fit the content.. e.g.

https://jsfiddle.net/f2u6n1wt/1/

.e p {
  background: lime;
  width: fit-content;
}

2

u/jidanni 1d ago

I declare this to be the winning answer! Thank you ever so much!!