Grow your CSS skills. Land your dream job.

:first-child

Last updated on:

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

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any 3.2+ Any 9.5+ 9+ Any Any

: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.

Comments

  1. Mitică

    Hi.

    :first-child works in IE 7+* and it was introduced in CSS2**.

    You’re probably referring to advanced selectors*** in CSS3 like :first-of-type.

    http://caniuse.com/css-sel2

    ** http://www.w3.org/TR/CSS2/selector.html#first-child
    *** http://caniuse.com/css-sel3


    Mitică

  2. Hi,

    Greats tutorial, thanks.
    I have a problem regarding to the above code, this CSS is not running out on Chrome( I don’t check in other browser yet).

        `p:last-child {
          font-size: 0.75em;
          font-style: italic;
        }`
    

    Also I had a question if the HTML elements is like this:

        `<article>
          <p>First paragraph...</p>
          <div>Consectetur adipisicing...</div>
          <div class="sticky">Lorem ipsum...</div>
          <div class="sticky">Dolor sit amet...</div>
        </article>`
    

    How can I style only the first of div.sticky?

    Best Regards,
    Wirka

    • Chris Hardwick
      Permalink to comment#

      How can I style only the first of div.sticky?

      How about nth-child? You can specify the type of element and it’s position in relation to its siblings, within the scope of the parent. Like so:

      article div:nth-child(2)

      This targets the second div (not the second child) inside the article tag. See Chris’s great article on nth-child for some clever solutions to seemingly complicated targeting of elements.

      -Chris

  3. I was having trouble with fisrt-child using it with tag but i discover the the firts-of-type pseudo-class. Thanks a lot :)

    `article.mapa{
    display: inline-block;
    width: 390px;
    margin: 0px;
    padding: 0px;
    }

    article.mapa:first-of-type{margin-right:16px;}`

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".