Search code examples
htmlcsslayoutcss-selectorsselector

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


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.

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>