How to select the last paragraph element ONLY if no other elements follow after her? (CSS selector q-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

Just add first-of-type to article in CSS

article:first-of-type p:last-of-type{
    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>
<etcettera>

</article>

CodePudding user response：

EDIT: You can use :last-child on your p tag on your

Documentation

column p:last-child{
    background: 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>
     <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>