:first-of-type CSS Pseudo Class

The :first-of-type pseudo-class in CSS is used to select the first element of its type among a group of sibling elements. It allows developers to apply styles specifically to the first occurrence of a particular element, regardless of other sibling elements’ types or classes. This pseudo-class is particularly useful when you want to target elements such as paragraphs, headings, or list items that appear first within their parent container without having to assign a unique class or ID to them.

Unlike the :first-child pseudo-class, which targets the very first child element of a parent, :first-of-type focuses on the first element of a given type. This distinction is crucial when your container has multiple types of elements and you only want to style the first instance of a specific tag. For example, if a div contains multiple p and h2 elements, :first-of-type allows you to select the first p independently of the h2 elements.

The pseudo-class is commonly used alongside CSS properties such as margin, padding, color, and font-weight to style only the initial occurrence of elements, which can improve readability, design hierarchy, or visual emphasis. It can also be combined with other pseudo-classes or attribute selectors for more precise styling.

Example:

<div class="content">
  <p>First paragraph – styled differently.</p>
  <p>Second paragraph – normal style.</p>
  <p>Third paragraph – normal style.</p>
</div>

.content p:first-of-type {
  color: blue;
  font-weight: bold;
  margin-bottom: 1em;
}

In this example, only the first <p> element inside the .content container will have the blue, bold text and extra bottom margin, while the other paragraphs remain unaffected. This demonstrates how :first-of-type can be used to target elements by type rather than by position alone.