:last-child

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

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

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

<article>
  <p>"Very well, Sir Francis," replied Mr. Fogg; "if he had been caught he would have been condemned and punished, and then would have quietly returned to Europe.  I don't see how this affair could have delayed his master."</p>

  <p>The conversation fell again.  During the night the train left the mountains behind, and passed Nassik, and the next day proceeded over the flat, well-cultivated country of the Khandeish, with its straggling villages, above which rose the minarets of the pagodas.</p>

  <p>Jules Verne was a French author who pioneered the genre of science fiction in the late nineteenth and early twentieth century. Follow him on Twitter.</p>
</article>

body {
  font-family: Palatino, Georgia, serif;
  max-width: 32em;
  padding: 1em 0 0 1em;
  line-height: 1.4;
}

/* by formatting the selector this way, we are less specific than `article p:first-child`
 this means ANY element that is the first child of `article` can be styled */
article :first-child {
color: red;
}

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

Browser Support

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