:first CSS Pseudo Class

The :first pseudo-class in CSS is a structural pseudo-class used to select the first element of its type within a parent container. It allows developers to apply specific styles to only the first occurrence of an element, which can be useful for creating unique visual emphasis, spacing, or typography differences for the initial element in a list, block, or group of sibling elements. Unlike classes or IDs, which require explicit assignment, :first relies purely on the document structure.

This pseudo-class is often used in conjunction with elements like li, p, or div to style the first child element in lists or content blocks. For instance, it can be used to increase the font size of the first paragraph in an article, highlight the first item in a navigation menu, or add extra margin to the first card in a grid layout.

One important consideration is that :first only targets the first sibling of its type and does not affect nested elements. For example, using :first on a p tag inside a div will only target the first p directly inside that div, and not any subsequent p elements inside nested containers. This specificity allows precise control without interfering with other elements.

A common usage scenario involves combining :first with other selectors or properties. For example, you might want to style the first list item differently:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

li:first {
  font-weight: bold;
  color: #2a9d8f;
  margin-bottom: 1em;
}

In this example, only the first li in the list is bold and colored, while the other items remain unaffected. You can also combine :first with CSS properties such as color, margin, or font-weight to achieve different visual effects.

It is worth noting that the more commonly used pseudo-class for selecting the first child of a parent is :first-child, which is more robust in many scenarios because it considers the actual first child element rather than the first occurrence of a type. However, :first can still be helpful for targeting the first instance of a specific element type when the exact child position is less relevant.