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

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>

and my css is:

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

I want replace the underline words with red color

The color property will change the color of the text.

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

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

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?

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>

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.

You may be looking for :first-child.

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 {

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.

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

Good luck. Happy coding!