[:last-of-type vs :last-child] #css

notes.md

:last-of-type

/* :last-of-type selects any <p> that is the last element
   of its type among its siblings */
p:last-of-type {
  color: lime;
}

/* can be applied to nested elements */
article :last-of-type {
  background-color: pink;
}

⬇

<article>
  <div>This `div` is first.</div>
  <div>This <span>nested `span` is last</span>!</div>
  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`!</div>
</article>

:last-child

/*  :last-child selects any <p> that is the last element
   among its siblings */
p:last-child {
  color: lime;
}

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

⬇

<div>
  <p>This text isn't selected.</p>
  <p>This text is selected!</p>
</div>

<div>
  <p>This text isn't selected.</p>
  <h2>This text isn't selected: it's not a `p`.</h2>
</div>