CSS :last-child

The CSS :last-child pseudo-class represents the last element among a group of sibling elements. It targets the last child element within its containing parent element.

Let's take a look at an example to understand how the :last-child selector works:


    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>

    li:last-child {
      color: red;
    }

Result:

Item 1
Item 2
Item 3
Item 4

In this example, the last <li> element within the <ul> element will be styled with red text color.

The :last-child selector is particularly useful when you want to style the last element in a list or a group of elements without having to manually apply a class or ID to it. It provides a convenient way to target the last item dynamically.