How to color the <p> tag without coloring the <span> wrapped inside?

HTML-CSS
1 
<body>
    <div>
        <p> I'm here
            <span>line 1</span>
        </p>
        <span>a</span>
        <span>b</span>
        <span>c</span>
        <span>d</span>
    </div>
</body>

How can I color the text “I am here” without coloring “line 1”? I have tried methods like
“div > p”
“:first-child”
“:not()”
but none of these works.

The only way I can think of is to add “color: black” to the tag to keep it original, but is it the only way to do so? Because it seems like a stupid way.

2

Hi @newtocode

Welcome to FCC.

Why don’t you just wrap the text you want to apply the styling to in the span tag instead? So that you have something like:

<p><span> I'm here  </span> line 1 </p>
1 Like
3

Text

Like this?

<p style="color:red">
  Text
  <span style="color:blue"> in blue</span>
</p>

You cannot prevent a child-element inheriting from it’s parent.

1 Like
4

Thank you! How about in the < div> case? How can I apply styles to the first < div> tag but not the < div> tags wrapped inside?

<div class="this_one">
    <div>
        <div>
        </div>
    </div>
</div>
5

In that case you might want to do what @Jagaya is suggesting. Apply styling on the wrapper and override(revert) the styling inherited by the child elements.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.