CSS :first-child and :last-child selectorsCSS :first-child and :last-child selectors

Posted January 2nd, 2010 in HTML and CSS (Updated September 26th, 2011)

The CSS selectors :first-child and :last-child are used to apply styling to the first and last child elements of the parent. :first-child is part of the CSS 2.1 specification and :last-child CSS 3 so support is slightly limited for :first-child and more limited for :last-child. A number of browsers also have issues applying the styling correctly after additional elements have been added dynamically.

HTML/CSS Example

The following example makes the the first <p> in  #example have a yellow background and the last <p> in #example have blue text:

<style type="text/css">
    #example p:first-child {
        background-color: yellow;
    }
    #example p:last-child {
        color: blue;
    }
</style>

<div id="example">
    <p>This is the first child</p>
    <p>This is the second child</p>
    <p>This is the third child</p>
    <p>This is the last child</p>
</div>

Just defining "p:first-child { ... }" would work the same, i.e. the containing element does not need to be included in the declaration, but it would then apply the styling to all <p> tags that are the first child of an element. In the above example it will only apply the styling to the first <p> child of #example.

Example in action

Here's the HTML and CSS from above working in action, and be sure to note the browser compatibilty information below.

This is the first child

This is the second child

This is the third child

This is the last child

Browser compatibility

Internet Explorer 6 has no support for either.

IE7 and IE8 both support :first-child and not :last-child but a <!DOCTYPE> must be specified.

Both work in all versions of Firefox. I have tested Chrome for Windows, Opera 9.64 and Safari 3 and 4 for Windows and they all work in those versions.

Please note as per the first paragraph of this post that there can be issues updating the styles of first-child and last-child when additional elements are added dynamically.

Useful :nth-child Recipes

As well as first-child and last-child, there's nth-child which gives a lot of control over styling child selectors. Supported in all modern browsers (IE from 9+ only). I've summarized a post by Chris Coyier here, with a direct link to the source article here.

Related posts:

Comments

blog comments powered by Disqus