First-of-Type and Last-of-Type Pseudo-Classes in CSS

The :first-of-type and :last-of-type pseudo-classes in CSS allow you to select and style the first and last elements of a specific type within their parent containers, respectively. These pseudo-classes are particularly useful when you want to apply styles to elements based on their position relative to other elements of the same type within the parent container.

:first-of-type

The :first-of-type pseudo-class selects the first element of a specific type within its parent container.

This pseudo-class is valuable when you have multiple elements of the same type within a parent container and you want to style only the first one.

:last-of-type

The :last-of-type pseudo-class selects the last element of a specific type within its parent container.

Similar to :first-of-type, this pseudo-class is used when you have multiple elements of the same type within a parent container and you want to style only the last one.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Structural Pseudo-classes</title>
    <style>
      div {
        background-color: burlywood;
        padding: 10px;
      }
      p:first-of-type {
        color: red;
      }
      p:last-of-type {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Structural Pseudo-classes</h1>
    <h3>:first-of-type :last-of-type</h3>

    <p>P-1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
    <div>
      <p>PD-1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
      <span>Span Tag</span>
      <b>Bold Tag</b>
      <span>Span Tag</span>
      <p>PD-2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
      <p>PD-3 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
    </div>

    <p>P-2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
    <p>P-3 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
  </body>
</html>

Live Preview

p:first-of-type:

This selector targets the first  element within its parent container.

color: red; sets the text color of the first  element to red.

p:last-of-type:

This selector targets the last  element within its parent container.

color: blue; sets the text color of the last  element to blue.

In summary, this code applies different text colors to the first and last  elements within their parent containers. If there are multiple paragraphs within a container, only the first and last paragraphs will have their text color adjusted: the first one to red and the last one to blue. This allows you to style these specific paragraphs differently from the rest, emphasizing their positions within the content structure.