CODEWITHSUNDEEP
htmlcss
Sarah Mandana
Sarah Mandana

Reputation: 1513

<span> does not color the text between new paragraphs

My HTML code is:

 <p> Marium, Sameen and Mubashir are not working. ok </p> <p> THIS IS NEW LINE </p> This is result 2 <p> Marium, Sameen and Mubashir are not working. <span class=ins>ok </p> <p> THIS IS NEW LINE</span> </p>

And my CSS is: 

 span.ins { color: green; display:inline;}  
 span.del { color:red;  text-decoration:line-through; display:inline;}

It colors the portion that is before the next <p> tag. That is "ok". But it does not color "THIS IS NEW LINE".

What could be the solution to it? I cannot use div as it changes the line itself. I don't want the line to be changed.

Upvotes: 1

Views: 95

Answers (3)

user5118896
user5118896

Reputation:

There is Nothing wrong in your css but slight change in HTML.

Instead of

<span class=ins>ok </p> <p> THIS IS NEW LINE</span></p>

Do

</p><span class=ins>ok  <p> THIS IS NEW LINE </p></span>

there is complete code

<p> Marium, Sameen and Mubashir are not working. ok </p>
<p> THIS IS NEW LINE </p> This is result 2
<p> Marium, Sameen and Mubashir are not working.</p>
<span class=ins>ok  
<p> THIS IS NEW LINE </p></span>

Upvotes: 0

vanntile
vanntile

Reputation: 2787

The correct HTML is:

span.ins {
  color: green;
  display: inline;
}
span.del {
  color: red;
  text-decoration: line-through;
  display: inline;
}
<p>Marium, Sameen and Mubashir are not working. ok</p>
<p>THIS IS NEW LINE</p>
This is result 2
<p>Marium, Sameen and Mubashir are not working. <span class="ins">ok </span>
</p>
<p><span class="ins">THIS IS NEW LINE</span>
</p>

Upvotes: 1

Manwal
Manwal

Reputation: 23836

Your html is invalid use following HTML structure of HTML snippet then your css will work: 

span.ins { color: green; display:inline;}  
span.del { color:red;  text-decoration:line-through; display:inline;}
<p> Marium, Sameen and Mubashir are not working. ok </p> 
<p> THIS IS NEW LINE </p> This is result 2 
<p> Marium, Sameen and Mubashir are not working.</p>
<p><span class=ins>ok THIS IS NEW LINE</span></p>

Jsfiddle DEMO

Upvotes: 2

Related Questions