:last-of-type

by

The :last-of-type selector targets the last element of its type within its parent element. This means it selects the final element that matches the specified element type, regardless of its position among other elements.

Syntax

element:last-of-type {
    /* Styles to apply to the last element of the specified type */
}

Replace element with the actual element type you want to target (e.g., p, h1, div, etc.).

Example

<div>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Last paragraph</p>
</div>
p:last-of-type {
    color: red;
    font-weight: bold;
}

In this example, the last paragraph element (<p>) will be styled with red text and bold font because it’s the last p element within its parent div.

Key points

  • The :last-of-type selector applies to the last element of a specific type within its parent.
  • It doesn’t matter if there are other elements between the last element and its parent.
  • You can use :last-of-type with any element type.
  • It’s a useful selector for applying styles to the final instance of a particular element within a specific context.

Additional notes

  • If you want to target the last element of any type within a parent, use the :last-child selector.
  • For more complex scenarios, you might combine :last-of-type with other selectors (e.g., :nth-of-type) to achieve specific styling effects.