CSS - Pseudo-class :last-of-type

The CSS pseudo-class selector :last-of-type is used to select and style the last element of its type within its parent container. This pseudo-class lets you target and apply the styles specifically to the last occurrence of a kind of element, within a given container.

:last-child vs :last-of-type

The CSS pseudo-class selector :last-child is similar to :last-of-type, but there is a difference: it is less specific. The :last-child matches only the last child of a parent element; whereas :last-of-type matches the specified element’s child even if it is not the last one.

Syntax

:last-of-type {
   /* ... */ 
}

CSS :last-of-type Example

Here is an example of :last-of-type pseudo-class, applied on <p> tag, under <div> parent element.

In this example, the CSS rules will only apply to the last <p> element found within a <div> element, leaving other <p> elements within the same container unaffected.

<html>
<head>
<style>
   p:last-of-type {
      color: black;
      background: peachpuff;
      font-weight: 600;
      font-size: 1em;
      font-style: italic;
      padding: 5px;
   }
   div {
      border: 2px solid black;
      margin-bottom: 5px;
   }
</style>
</head>
<body>
   <div>Parent element
      <p>first child, so no change</p>
      <p>second child, so no change</p>
      <p>last child, so :last-of-type pseudo-class is applied</p>
   </div>
</body>
</html>

Here is an example of :last-of-type pseudo-class, applied on <div> and <p> element.

In the example above, the last-of-type CSS rule is applied on the last item of <div> element, and also the <p> element.

<html>
<head>
<style>
   #container .item:last-of-type {
      color: blue;
      background-color: lightpink;
      font-weight: bold;
   }
   div,p {
      padding: 10px;
   }
</style>
</head>
<body>
   <div id="container">
      <div class="item">first div, so no change.</div>
      <div class="item">second div, so no change.</div>
      <div class="item">
         Third div, last child of the parent div, so CSS applied.
      </div>
      <p class="item">Last p element of its parent, selected by .container.item class selector.</p>
   </div>
</body>
</html>
Advertisements