:first-child

The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Suppose we have an article and want to make the first paragraph larger – like a “lede”, or piece of introductory text:

<article>
  <p>First paragraph...</p>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
</article>

Instead of giving it a class (e.g. .first), we can use :first-child to select it:

p:first-child {
  font-size: 1.5em;
}

Using :first-child is very similar to :first-of-type but with one critical difference: it is less specific. :first-child will only try to match the immediate first child of a parent element, while first-of-type will match the first occurrence of a specified element, even if it doesn’t come absolutely first in the HTML. In the example above the outcome would be the same, only because the first child of the article also happens to be the first p element. This reveals the power of :first-child: it can identify an element with relation to all its siblings, not just siblings of the same type.

The more complete example below demonstrates the use of :first-child and a related pseudo-class selector, :last-child.

Check out this Pen!

Other Resources

• Related to: last-child, first-of-type, :last-of-type
• Mozilla Docs

Browser Support

:first-child was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments. If you require older browser support, either polyfill for IE, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.