CSS Last of Type

CSS Last of Type is a pseudo-class selector that selects the last element of a specific type within its parent element. This selector is useful when you want to apply specific styles to the last element within a container.

Syntax

selector:last-of-type {
  /* styles */
}

Example

Suppose you have a list of items within a container, and you want to apply a different background-color to the last list item. You can use :last-of-type selector to accomplish this like so:

<div class="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

li:last-of-type {
  background-color: yellow;
}

In this example, the last list item will have a yellow background color applied to it.

Browser Support

CSS Last of Type is supported in all modern browsers, including Internet Explorer 9 and higher.

Conclusion

CSS Last of Type is a useful selector for targeting the last element of a specific type within its parent element. It allows you to apply styles that are specific to the last element without having to add any additional markup to your HTML.