How do I exclude span inside p tag while applying css

Question

I have my html like this:

<div class="instructions">
  <h2>Heading</h2>
  <p><span>Step 1: </span>This is step 1</p>
  <p><span>Step 2: </span>This is step 2</p>
  <p><span>Step 3: </span>This is step 3</p>
  <p><span>Step 4: </span>This is step 4<p>
</div>

What I want to achieve is apply text-decoration: underline; on my text inside p but not on span.

I have tried using :not() selector and applying inheritance but not able to get the expected results.

Please show the code you've tried. You can use Stack Snippets (icon looks like `<>` in the editor toolbar) to make a runnable example here on Stack Overflow, much as the answerer did. — Heretic Monkey, Apr 29 '21 at 16:33

score 2 · Accepted Answer · answered Apr 29 '21 at 16:39

2

Make the spans display:inline-block

p {
  text-decoration: underline;
}

span {
  display: inline-block;
}

<div class="instructions">
  <h2>Heading</h2>
  <p><span>Step 1: </span>This is step 1</p>
  <p><span>Step 2: </span>This is step 2</p>
  <p><span>Step 3: </span>This is step 3</p>
  <p><span>Step 4: </span>This is step 4
    <p>
</div>

answered Apr 29 '21 at 16:39

Paulie_D

107,962
13
142
161

The author might wanna move the spaces out of the spans too so they don't get [lost](https://www.w3.org/TR/CSS21/text.html#white-space-model) in the inline-blocks. – BoltClock Apr 29 '21 at 16:41
1

@isherwood: [Text decorations don't propagate to inline-blocks.](https://stackoverflow.com/questions/13857853/why-does-display-inline-block-remove-an-underline-from-a-child-element/13857910#13857910) You can't override text decorations, so turning the spans into inline-blocks is a quick and serviceable hack depending on the text you're working with. – BoltClock Apr 29 '21 at 16:43
Thank you. Some explanation of that would improve this answer. Even as a veteran I didn't know (or had forgotten) that. – isherwood Apr 29 '21 at 16:44
That's quite useful @Paulie_D!! As @BoltClock said I would also like to move out spaces from the span. As I did that, spaces got decorated as well. – Abhijeet Apr 29 '21 at 16:52

How do I exclude span inside p tag while applying css

1 Answers1