How to replace an underline text in a p tag using span

Code Feedback
1

I have the following code:

<div id="instru_topp">
                <h3>The topping</h3>
                <p><span class="especial">Mix</span> all the -- <span>Ingredients</span>  and pour it on the top cake.
                    After bakin it, you will end up with this:</p>
            </div>

and my css is:

#instru_topp p span:last-child {
        text-decoration: underline;
    }

I want replace the underline words with red color

2

The color property will change the color of the text.

3

Hi there!
Just give them color: red :grinning:

4

Not working, note I have two span tags on that p tag, the first span has got a class…

5

I’m not sure I’m understanding correctly but you can just replace your CSS with p span:last-child {color: red;} Or are you trying to change the style after an action by the user?

6

sorry my mistake: the code is:

<div class="description">
                <p>This recipe is from one of my <span>favorite</span> cakes out there, really <span>delicious</span>...check it out below</p>
            </div>

my css for that bit is:

.description p span {
    font-style: italic;
}

and the question is:
Give the first element within the

tag a special class. Now add CSS that will remove the italics and apply a red color instead.

7

You may be looking for :first-child.

8

he did change the color of first span to red, but second span stayed italic…

.description p span {
  font-style: italic;
}

.description p span:first-child {
  color:red;
}
9

It’s really not clear what you are trying to do.

You give an element a “special class” by adding that to the html tag.
If you only want to change the ones with that “special class” then you use a selector for that class. No other span elements will be effected.

If you want to change the first child element, you can do it with :first-child. Only the first element will be effected.

10

I will use your last suggestion. Thank you :grinning:

11

Good luck. Happy coding!