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:

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

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.


  1. Mitică


    :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://www.w3.org/TR/CSS2/selector.html#first-child
    *** http://caniuse.com/css-sel3


  2. Wayan Wirka
    Permalink to comment#


    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:

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

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

    Best Regards,

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


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

    display: inline-block;
    width: 390px;
    margin: 0px;
    padding: 0px;


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

    • Uncle Jesse
      Permalink to comment#

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

  5. 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!



Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.