{"id":14222,"date":"2011-09-06T20:15:42","date_gmt":"2011-09-07T03:15:42","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14222"},"modified":"2013-04-03T13:47:35","modified_gmt":"2013-04-03T20:47:35","slug":"last-child","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/last-child\/","title":{"rendered":":last-child"},"content":{"rendered":"

The :last-child<\/code> selector allows you to target the last element directly inside its containing element. It is defined in the CSS Selectors Level 3 spec<\/a> as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling content.<\/p>\n

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>\n

<article>\r\n  <p>Lorem ipsum...<\/p>\r\n  <p>Dolor sit amet...<\/p>\r\n  <p>Consectetur adipisicing...<\/p>\r\n  <p>Last paragraph...<\/p>\r\n<\/article><\/code><\/pre>\n
Instead of using a class (e.g. .last<\/code>), we can use :last-child<\/code> to select it:<\/p>\n
p:last-child {\r\n  font-size: 0.75em;\r\n}<\/code><\/pre>\n
Using :last-child<\/code> is very similar to :last-of-type<\/code> but with one critical difference:<\/b> it is less specific<\/a>. :last-child<\/code> will only try to match the very last child of a parent element, while last-of-type<\/code> 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<\/code> also happens to be the last p<\/code> element. This reveals the power of :last-child<\/code>: it can identify an element with relation to all of its siblings, not just siblings of the same type<\/i>.<\/p>\n
The more complete example below demonstrates the use of :last-child<\/code> and a related pseudo-class selector, :first-child<\/code><\/a>.<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
Other Resources<\/h3>\n