Home > Software engineering >  Change Background color of second para in the same p tag
Change Background color of second para in the same p tag

Time:06-14

Wanted to know if it is possible to change the background color of the second paragraph in the same p element enter image description here

<span >
        <p><strong>Lorem Ipsum</strong>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br><br><strong>Lorem Ipsum</strong>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </span>

I know it is possible with different p tags using the nth-child

Thank you for your help! :)

CodePudding user response:

maybe change your approach to it. Separate the p tags by its sentences then use :nth-child() If you know the exact position of the child element.

.paragraphs p:nth-child(2) {
  background: orange;
}
<div >
  <p>
    <strong>Lorem Ipsum</strong>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
  </p>
  <p>
    <strong>Lorem Ipsum</strong>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </p>
</div>

CodePudding user response:

  <body>

    <span >
        <p><strong>Lorem Ipsum</strong>
            is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br><br>
        </p><p style="background-color: goldenrod"><strong>Lorem Ipsum</strong>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      
    </p>
    </span>
   
       
  </body>

  • Related