*of-type

<!DOCTYPE html>
<html>

<head>
  <style>
    p:only-of-type {
      background: red;
    }
    
    div:first-of-type {
      padding: 10px;
      background: indigo;
    }
    
    div:last-of-type {
      padding: 10px;
      background: rgba(0, 0, 0, 0.3);
    }
    
    li:nth-of-type(odd) {
      color: pink;
    }
    
    blockquote:only-of-type {
      border-left: 5px solid slategrey;
      color: slategrey;
      padding-left: 1rem;
      font-weight: bold;
      font-style: italic;
    }
  </style>
  <script src="script.js"></script>
</head>

<body>
  <div>
    <p>This is the only paragraph of parent, show in red.</p>
  </div>

  <div>
    <p>1th paragraph of this parent.</p>
    <p>2th paragraph of this parent.</p>
  </div>
  
  <blockquote>
    this is the only blockquote in the body
  </blockquote>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>

</body>

</html>

// Code goes here

/* Styles go here */