:last-of-type CSS Pseudo Class

The :last-of-type pseudo-class in CSS is used to select an element that is the last sibling of its type within its parent container. Unlike the :first-child pseudo-class, which targets the very first child regardless of type, :last-of-type specifically considers the element’s type, allowing for more precise selection when multiple types of elements exist as siblings. This makes it especially useful in scenarios where you want to style the final occurrence of a specific element without affecting other types.

For example, if you have multiple paragraphs inside a div and only want to style the last paragraph differently, :last-of-type provides a clean solution. It can be combined with various CSS properties like margin, color, or border to achieve distinct visual effects.

Another common use of :last-of-type is in lists. For instance, in an unordered list (ul), you might want the last li item to have no bottom border or extra padding. Using :last-of-type ensures that only the final item of that type is affected, leaving the rest of the list intact.

Here is a practical example:

<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>

li:last-of-type {
  font-weight: bold;
  color: red;
}

In this example, only "Item Three," the last li in the list, will be bold and red. Any additional elements of a different type within the same ul will not be affected.

The :last-of-type pseudo-class is also powerful when combined with combinators and other pseudo-classes, allowing developers to create complex and highly specific styling rules without adding extra classes or IDs. This helps maintain semantic and clean HTML structure while still achieving the desired visual styling.