: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

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. User Avatar
    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. User Avatar
    Wayan Wirka
    Permalink to comment#

    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

    • User Avatar
      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

    • User Avatar
      Tom
      Permalink to comment#

      I recommend you do the following:

      article div.sticky:first-child

      This way you make it explicit that you want the first div with class sticky. If you add another div later on you might run into problems if you’re using Chris Hardwick’s answer. It’s not a bad answer, don’t get me wrong.

  3. User Avatar
    Christian

    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;}`

  4. User Avatar
    Chris
    Permalink to comment#

    Not sure who wrote this particular article, but the browser information is completely wrong. :first-child was introduced in CSS2 and works in IE7+. http://www.w3schools.com/cssref/sel_firstchild.asp. This post is a few years old so hopefully it gets updated soon to avoid misinforming readers.

    • User Avatar
      Uncle Jesse
      Permalink to comment#

      The author’s name is at the top of the article, along with the date published.

  5. User Avatar
    Justin
    Permalink to comment#

    Hey Chris,

    This is supported in IE7. You have it listed as 9+. I just learned this recently as well – that :last-child is only supported in IE9+, but :first-child is supported in IE7+. I thought this was awesome information to come accross btw!

    http://www.w3schools.com/cssref/sel_firstchild.asp

    Thanks,
    Justin

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag