:first-child CSS Pseudo Class

The :first-child pseudo-class in CSS is used to target an element that is the first child of its parent. This means that the element must be the very first among its siblings in the DOM tree to match. It is a structural pseudo-class, allowing developers to apply styles based on the element’s position rather than its type or class. This can be particularly useful when you want to style the first item in a list, table row, or any container without adding extra classes or IDs.

Unlike simple element selectors, :first-child works by considering the element’s placement among all types of children, not just elements of a particular type. For example, if the first child of a container is a text node or a comment, the pseudo-class will not select the next element. For situations where you want the first of a specific type, consider using :nth-of-type() instead.

This pseudo-class is often combined with other selectors to create more precise styling rules. For instance, you might want the first paragraph in every section to have extra spacing, or the first item in a navigation menu to have a different background color. It can also be paired with pseudo-elements like ::before to create decorative effects that only appear on the first child.

Example in HTML and CSS:

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

<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
</div>

ul li:first-child {
  font-weight: bold; /* The first list item is bold */
}

.cards .card:first-child {
  border: 2px solid #007BFF; /* Only the first card has a border */
}

In this example, only the first <li> and the first .card element are affected. Other children remain unaffected, making :first-child a powerful tool for targeting elements based purely on their order in the DOM.