Home How to select the last paragraph element ONLY if no other elements follow after her? (CSS selector question)

Questions

How to select the last paragraph element ONLY if no other elements follow after her? (CSS selector question)

May 25, 2022

How can I select the last paragraph <p> element, if and only its the last and lowest HTML element of the <article> element?

I don’t want to use .classes or #id's.
A CSS selector should automatically find and select the <p> element.

In my demo, in the first section, the last <p> element should be selected, while in the second section the last <p> element should not be selected.

Thank you for your directions.

article p:last-of-type{
    background: yellow;
  }

<article>
   <column>
     <p>Text</p>
     <p>Text</p>
     <p>Text</p>
     <p>This paragraph should <b>NOT</b> be selected, if this would be the last paragraph on a page.</p>
     <div>Text</div>
     <div>Text</div>
  </column>

  <hr>

  <column>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>This paragraph <b>SHOULD</b> be selected, if this was the last paragraph on the page.</p>
  </column>
</article>

>Solution :

Some options for you. Main thing selecting the first article child.

article:nth-child(1) p:last-of-type {
  background: yellow;
}

article:nth-child(1) p:last-child {
  background: yellow;
}

article:first-of-type p:last-of-type {
  background: yellow;
}

article:first-child p:nth-child(4) {
  background: yellow;
}

article:first-child p:last-of-type {
  background: yellow;
}

article:first-child p:last-child {
  background: yellow;
}

<article>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>This paragraph <b>SHOULD</b> be selected.</p>
</article>

<br><br>
<hr><br><br>

<article>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>But this paragraph should <b>NOT</b> be selected.</p>
  <div>Text</div>
  <video src="/ufo landing right in the middle of a demonstration full hd footage.mpg" alt="" />
  <img src="/ufo interview with human in 12k resolution.mpg" />
  <div>Text</div>
</article>

Version 2:

column:last-of-type p:last-child {
  background-color: yellow;
}

<article>
   <column>
     <p>Text</p>
     <p>Text</p>
     <p>Text</p>
     <p>This paragraph should <b>NOT</b> be selected.</p>
     <div>Text</div>
     <video src="/ufo landing right in the middle of a demonstration full hd footage.mpg" alt="" />
     <img src="/ufo interview with human in 12k resolution.mpg" />
    <div>Text</div>
  </column>

  <hr>

  <column>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>This paragraph <b>SHOULD</b> be selected.</p>
  </column>
</article>