JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p>div 1</p>
  <p>div 2</p>
  <p>div 3</p>
  <p>div 4</p>
</div>
<hr>
<div>
  <p>div 1</p>
  <p>div 2</p>
  <p>div 3</p>
  <p>div 4</p>
</div>

CSS

div {
      background: #fff;
    }
    
    p:first-of-type,
    p:last-of-type {
      background: #f00;
    }