Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS First- and last-of-type pseudo selectors. Reply To: First- and last-of-type pseudo selectors.

#257116
Paulie_D
Member

I think you have grasped it.

The nth-of-x selectors are incredibly generic and usually need additional specificity to make sure they don’t also select other elements.

Take your div.example p:last-of-type example.

Yes, this will target the last paragraph in the div with a class of examplebut it won’t stop there.

It will also target the <p> in this structure…

<div class="example">

  <p></p>
  <p>Selects this</p>

  <div class="other">
    <p></p>
    <p>And this</p> /* I'm the last <p> tag that is also a descendant of the example div */
  </div>

</div>

…because we haven’t been specific enough in the selector.