The :last-child selector allows you to target the last element directly inside its containing 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 last paragraph smaller, to act as a conclusion to the content (like an editor's note):

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

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

p:last-child {
  font-size: 0.75em;

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

The more complete example below demonstrates the use of :last-child and a related pseudo-class selector, :first-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

:last-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. User Avatar
    Permalink to comment#


  2. User Avatar
    Permalink to comment#

    tha a gud site lol

  3. User Avatar

    Doesn’t work if the elements have display property set to none. It still considers the hidden element as the last child. I guess technically that is correct, but unintended in many cases.

  4. User Avatar
    Ramesh Chowdarapally
    Permalink to comment#

    Hi Chris, does ‘last-child’ supports for list also, i mean to li:last-child?
    I have tried but not working.

    • User Avatar
      Permalink to comment#

      Yes you can use it on list:

      `   ul.page-nav li:last-child {
          border-bottom: 0px;
  5. User Avatar
    Permalink to comment#

    Do I necessarily need to specify a selector before :last-child?
    Maybe I don’t know if the last element is a paragraph, a div container, or whatever.

    #my-container > :last-child {

    Is this correct, too?

    • User Avatar
      Rico Mossesgeld
      Permalink to comment#

      You’ll have to use the * selector, to tell the browser to consider all of the elements:

      #my-container > *:last-child {


  6. User Avatar
    Permalink to comment#

    According to this answer on Stack Overflow, the universal selector is not necessary. In the meantime, I tried it on different sites and I can confirm that it works perfectly without the universal selector.

    • User Avatar
      Permalink to comment#

      Can confirm also, works fine without the universal selector.

  7. User Avatar
    Permalink to comment#

    Oh great that * selector worked for me. Thanks to @Rico Mossesgeld

  8. User Avatar
    Permalink to comment#

    Nice article, thanks!

  9. User Avatar
    Permalink to comment#

    I use more li. how can change particular li (ex 3rd li )

    • User Avatar
      Permalink to comment#

      You can use the nth-child() selector

      your li:nth-child() {your style}

      just put the number of the li, ex: nth-child(3)

  10. User Avatar
    Permalink to comment#

    I’m having a problem in applying :last-child

    Please see http://codepen.io/anon/pen/ZYaqgp

    I want to remove the last bottom border in the widget area. Deactivating the second code block and activating the last – with the :last-child code – still removes all widget borders in that area.

    Any suggestions please?

  11. User Avatar
    Permalink to comment#


  12. User Avatar
    Permalink to comment#

    Applying all anchor in ul instead last anchor

    .loginNav li a:last-child { border-left:0;}

Leave a Comment

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.