:last-child

The CSS :last-child pseudo-class targets an element only when it is the final child inside its parent. It is commonly used to remove extra spacing, borders, or separators from the last item in a list, navigation menu, card group, form section, or any repeated layout pattern.

Its behavior depends on document structure, not just visual appearance or element type. That distinction matters because :last-child can fail to match when another element appears after the target, while related selectors such as :last-of-type follow different matching rules.

#	Preview	Product	Price
1		for ECG Rhythm Interpretation Pocket Cards, Double-Sided Tri-Fold Quick Reference Guide for ACLS...	$5.69	Buy on Amazon

As an Amazon Associate I earn from qualifying purchases.

What :last-child Selects

The CSS :last-child pseudo-class matches an element only when that element is the final child node of its parent, among other element children. In practical terms, it asks: “Is this element the last element inside its container?” If the answer is yes, the selector applies; if another element comes after it, it does not.

For example, in a list like <ul><li>One</li><li>Two</li><li>Three</li></ul>, the selector li:last-child matches only the third <li>. The first two list items are also <li> elements, but they are not the last child of the <ul>, so they are ignored.

#1 Best Overall

for ECG Rhythm Interpretation Pocket Cards, Double-Sided Tri-Fold Quick Reference Guide for ACLS Analysis, 12-Lead EKG Strip Review, AV Block & Bundle Branch Block

• [TRI-FOLD CONVENIENCE] This pocket card features a double-sided tri-fold design, allowing you to quickly for ACCESS for vital information in vibrant colors, perfect for busy professionals.
• [EXTENSIVE COVERAGE] Dive into complex concepts such as AV block and bundle branch block, providing a comprehensive resource for ACLS rhythm analysis and 12-lead interpretation.
• [ELEVATE WORKFLOW EFFICIENCY] Improve your efficiency in diagnosing conditions and reviewing examinations with integrated preventive measures and abnormal morphology recognition.
• [QUICK for ACCESS TO KEY INFO] Our pocket guide cards offer clear, descriptive content for swift decision-making in critical situations.
• [SIZE DETAILS] proper handling with dimensions of 30 x 15 cm.

$5.69

Buy on Amazon

The element type in the selector still matters. With p:last-child, the browser looks for <p> elements that are also the final child of their parent. It does not mean “select the last paragraph inside a container” in every case. If a <div> contains two paragraphs followed by a button, p:last-child matches nothing, because neither paragraph is the parent’s final child.

How the match is determined

• The selector starts with an element: li:last-child considers only <li> elements.
• The element’s parent is checked: the browser examines whether that element is the last child within its parent.
• The element must satisfy both parts: it must be an <li>, and it must be the final child.

Whitespace, indentation, and line breaks in HTML do not stop :last-child from working as expected in CSS selector matching. A newline after the last element in your markup is not treated as an element that prevents the match. Comments also do not count as element children for this selector. What matters is the position of actual elements inside the parent.

Consider a card component with a heading, paragraph, and link. A selector such as .card > :last-child targets whichever element is last directly inside .card, whether it is a paragraph, link, button, or another element. This pattern is useful when you care about layout position rather than tag name, such as removing bottom margin from the final item in a container.

The “child” part is also specific: :last-child only evaluates direct parent-child relationships. It does not search through all descendants to find the deepest or final nested element. In .panel p:last-child, each matching paragraph must be the last child of its own immediate parent, not merely the last paragraph somewhere inside .panel.

Basic Syntax and Simple Examples

The :last-child pseudo-class is appended to a selector and matches an element only if that element is the final child node of its parent among element children. In everyday CSS, the most common form is a type selector, class selector, or compound selector followed by :last-child. The selector does not mean “the last matching element”; it means “an element that matches this selector and is also the last child of its parent.”

Basic syntax

The general pattern is simple:

• :last-child selects any element that is the last child of its parent.
• li:last-child selects an <li> only when it is the final child inside its parent.
• .item:last-child selects an element with class item only when it is the final child inside its parent.
• nav a:last-child selects an <a> inside <nav> only if that anchor is the final child of its parent.

A common list example is removing spacing from the final item. If each list item has a bottom margin, the last one can be reset so the list does not create extra space after its content:

li {
margin-bottom: 0.75rem;
}

li:last-child {
margin-bottom: 0;
}

Given this markup, only the third list item matches li:last-child because it is the final child of the <ul>:

<ul>
<li>Design</li>
<li>Build</li>
<li>Launch</li>
</ul>

Combining with classes

You can combine :last-child with classes to target a specific component structure. For example, a vertical stack may apply borders between rows but remove the border from the final row:

.panel-row {
border-bottom: 1px solid #ddd;
padding: 1rem;
}

.panel-row:last-child {
border-bottom: 0;
}

This works as expected only when the last child of the parent is also a .panel-row. If another element appears after the rows, such as a footer or script-rendered placeholder, the final .panel-row will no longer match .panel-row:last-child. In that case, the selector is checking the row’s position among all siblings, not just among siblings with the same class.

Using it in nested structures

The selector can also be scoped to a specific container to avoid affecting matching elements elsewhere on the page:

.menu > li:last-child {
margin-right: 0;
}

Here, the child combinator > limits the rule to direct <li> children of .menu. That distinction matters in nested navigation. Without >, a selector such as .menu li:last-child could also match the last item inside a submenu. With .menu > li:last-child, only the last top-level menu item is selected.

The bare selector :last-child is valid too, but it is usually too broad for component styling because it can match many different element types. In production stylesheets, it is usually clearer to pair it with a type, class, or structural selector so the rule communicates exactly which element is expected to be last.

Common UI Use Cases

The :last-child pseudo-class is especially useful for removing or changing styling on the final item in a repeated UI pattern. Many interfaces apply borders, margins, padding, or separators between sibling elements, but the last item often needs slightly different treatment so the layout does not look uneven.

Removing the final separator in lists

A common pattern is a vertical menu, sidebar list, or settings panel where each item has a bottom border. Without adjustment, the final item also receives a border, which can make the component look heavier than intended. Using :last-child, you can remove that final divider only when the element is truly the last child of its parent.

For example, in a navigation list, li:last-child can target the final list item and remove its border or extra spacing. This keeps the rule tied to the document structure rather than requiring a special class like last in the HTML.

Controlling spacing in stacked layouts

Another frequent use is spacing between repeated blocks, such as cards, form fields, comments, notifications, or FAQ entries. A design may add margin-bottom to every item to create vertical rhythm, then remove that margin from the last child so the parent container does not have extra space at the bottom.

This is particularly helpful in reusable components. For example, a card list might use a consistent gap between cards, while .card:last-child ensures the last card does not push beyond the intended padding of the container. The same idea works for paragraphs inside content blocks, where p:last-child can prevent a trailing margin from creating awkward whitespace.

Polishing horizontal navigation and button groups

In horizontal UI patterns, :last-child can adjust the final item in a row. Navigation links may have a right margin, buttons in a segmented control may have dividing borders, or breadcrumb items may include a separator after each link. The final item usually should not show the same trailing decoration.

• Breadcrumbs: hide the slash, arrow, or chevron after the last breadcrumb item.
• Button groups: remove the right border or round the final button’s right corners.
• Inline menus: remove the final margin so the menu aligns cleanly with surrounding content.
• Tag lists: prevent a comma, pipe, or separator from appearing after the final tag.

Styling the final message, row, or panel

Dynamic interfaces often render a changing number of items. Chat threads, activity feeds, tables, and accordions may not know ahead of time which item will be last. The :last-child selector handles this automatically as the DOM changes. For instance, the final chat message can receive a different bottom margin, the last accordion panel can have no bottom border, or the last row in a custom table-like layout can avoid a divider.

When using :last-child in these cases, make sure the element you are targeting is actually the final child of its parent. If the parent contains another element after it, such as a hidden template, script, helper message, or loading indicator, the selector will not match the item you expect. In those situations, a more specific structure, a wrapper element, or another selector may be more reliable.

`:last-child` vs `:last-of-type`

The main difference between :last-child and :last-of-type is what each selector checks at the end of a parent element. :last-child matches an element only if it is the final child node among all element children of its parent. :last-of-type is more specific to the element’s tag name: it matches an element if it is the final sibling of that same element type, even when other element types come after it.

For example, imagine a card that contains two paragraphs followed by a button. The selector p:last-child will not match the second paragraph, because the paragraph is not the final child of the card; the button is. However, p:last-of-type will match that second paragraph, because it is the final <p> element among its siblings.

Example with mixed elements

Consider this structure: a container includes <p>Intro</p>, <p>Details</p>, and <a>Read more</a>. In that case, p:last-child matches nothing, because neither paragraph is the last child. The anchor is the last child. By contrast, p:last-of-type matches the “Details” paragraph because it is the last paragraph within that parent.

This distinction matters in real layouts. If you are removing bottom margin from the final visible block in a component, :last-child is usually the better fit because it targets the actual final element, regardless of its tag. If you only want to style the final paragraph inside content that may also include links, buttons, images, or headings after the text, p:last-of-type is usually more reliable.

Common selection patterns

• Use :last-child when the element must be the final child of its parent, such as .menu-item:last-child or .stack > :last-child.
• Use :last-of-type when you care about the final element of a specific tag, such as article p:last-of-type.
• Avoid assuming they are interchangeable; they behave the same only when the final element is also the final element of that type.

One subtle point is that :last-of-type is based on the element’s type selector, not its class. For instance, .item:last-of-type does not mean “the last element with class item.” It means “an element with class item that is also the last sibling of its tag type.” If you need to style the final item in a repeated component, a parent-child pattern such as .list > .item:last-child is usually clearer, as long as those items are truly the final children in that container.

Edge Cases and Common Mistakes

The most common mistake with :last-child is expecting it to mean “the last matching element.” It does not search for the final element that matches the selector. Instead, the element must match the selector and be the final child inside its parent. For example, li:last-child only matches an <li> if that <li> is the parent’s last child. If a different element appears after it, such as a <script>, <template>, or another visible element, the rule will not apply.

This often appears in lists, menus, and card layouts where markup changes over time. A navigation list might start with only <li> elements, so .nav li:last-child works as expected. Later, a developer adds a hidden tracking element, an injected widget, or an extra button after the last list item. The selector then stops matching because the last <li> is no longer the final child of the parent. If the goal is to style the last list item of its element type, :last-of-type may be more reliable.

Text nodes and comments

Whitespace, line breaks, and HTML comments do not prevent :last-child from matching. The selector works with element children, not text nodes created by formatting the HTML source. This means the following structure still allows the paragraph to match p:last-child even if there is whitespace after it in the source. Comments also do not count as child elements for this selector.

• :last-child is affected by element siblings.
• Whitespace between elements does not change the match.
• HTML comments do not count as children for this selector.
• Dynamically inserted elements can change which element is considered last.

Hidden elements still count

An element does not need to be visible to affect :last-child. If the last child has display: none, the previous visible element is still not the last child. For example, if a list ends with <li class="hidden">, then the previous list item will not match li:last-child. This can cause unwanted borders, margins, or separators to remain on the last visible item.

Another common mistake is using :last-child when the selector needs to account for nesting. In .cards .card:last-child, the .card must be the last child of its own parent, not necessarily the last card in the entire .cards area. If cards are wrapped in rows, columns, or component containers, the selector may match the last card in each wrapper rather than the final card in the overall layout. Checking the actual DOM structure in browser developer tools is the safest way to confirm what parent each element belongs to.

Modern selector combinations can also help avoid fragile patterns. For spacing between items, .item:not(:last-child) is often clearer than styling every item and then undoing the style on the last one. For example, adding a bottom margin to all items except the final child avoids override conflicts. For more complex layouts, especially where elements can be filtered, hidden, or inserted dynamically, a utility class such as .is-last or a layout method using gap can be more stable than relying on structural position alone.

Browser Support and Best Practices

The :last-child pseudo-class is safe to use in modern CSS. It is supported across current versions of Chrome, Edge, Firefox, Safari, Opera, and mobile browsers, including iOS Safari and Android-based browsers. Support also exists in Internet Explorer 9 and later, so for most projects it can be treated as a stable selector. The main compatibility issue is not whether the selector exists, but whether your CSS relies on newer selector features alongside it, such as :is(), :where(), or advanced combinations from Selectors Level 4.

For broad compatibility, keep simple patterns straightforward. A selector like li:last-child, .card:last-child, or .nav-item:last-child is widely supported and easy to understand. These selectors match an element only if it is the final child node element within its parent. They do not care about text nodes or comments, but they do care about other element nodes. If another element appears after the target, even a hidden element or a script inserted by a framework, the target will no longer match.

Best practices for reliable use

• Use it for spacing cleanup: Removing the final margin, border, or divider from a list of repeated items is one of the clearest uses of :last-child.
• Scope selectors to a component: Prefer .menu > li:last-child over a broad selector like li:last-child to avoid unexpected matches elsewhere on the page.
• Use child combinators when structure matters: .stack > *:last-child targets only the last direct child, which is often more predictable than matching descendants at any depth.
• Choose :last-of-type when the element type matters: If you want the last paragraph among siblings even when another element follows it, p:last-of-type is usually the better selector.
• Test with real rendered markup: Template engines, CMS plugins, ads, analytics scripts, and client-side frameworks can add elements that change which child is last.

A common best-practice pattern is to style all repeated elements the same way, then adjust the final one. For example, navigation items might all receive a right margin, while .nav-item:last-child removes that margin. In modern layouts, however, consider whether CSS layout features can solve the same problem more cleanly. Flexbox and Grid gap often remove the need for last-child margin overrides because spacing is applied between items rather than on the items themselves.

In production CSS, :last-child works best when the parent-child relationship is predictable. Use meaningful class names, keep selectors narrow, and avoid depending on the selector when the DOM order may change frequently. When paired with component scoping and simple selector chains, :last-child remains a dependable tool for polishing lists, cards, navigation, form rows, and repeated interface patterns.

Frequently Asked Questions

What does `:last-child` actually match in CSS?

The `:last-child` pseudo-class matches an element only if it is the final child inside its parent. For example, `li:last-child` selects an `li` only when that `li` is the last element among all children of its parent, not just the last `li`.

Why is my `:last-child` selector not working?

Most often, the element you are targeting is not actually the last child of its parent. Another element after it, such as a button, script, wrapper, or hidden element, can prevent the selector from matching. Inspect the parent in browser DevTools to confirm the exact child order.

What is the difference between `:last-child` and `:last-of-type`?

`:last-child` requires the element to be the final child of its parent, regardless of element type. `:last-of-type` only requires it to be the last element of its tag type among its siblings. For example, `p:last-of-type` can match the last paragraph even if another element, such as a `div`, comes after it.

Can I use `:last-child` to remove the border or margin from the last item in a list?

Yes, this is one of the most common uses for `:last-child`. A selector like `li:last-child { margin-bottom: 0; }` or `.menu-item:last-child { border-right: none; }` is useful for cleaning up spacing and separators on the final item.

Is `:last-child` supported in all modern browsers?

Yes, `:last-child` is supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and mobile browsers. It has been reliable for many years, so it is generally safe to use in production. If you support very old browsers such as Internet Explorer 8 or earlier, test carefully or use a class-based fallback.

Bottom Line

The :last-child pseudo-class is useful when you want to style an element only if it is the final child inside its parent, regardless of element type. It is ideal for patterns like removing the last item’s margin, styling the final navigation link, or adjusting list spacing without adding extra classes.

Use :last-child when position among all siblings matters, and choose :last-of-type when you only care about the last element of a specific tag type. As a next step, test your selector against the actual HTML structure so hidden assumptions about whitespace, extra elements, or mixed sibling types do not affect the result.

Quick Recap

Bestseller No. 1

for ECG Rhythm Interpretation Pocket Cards, Double-Sided Tri-Fold Quick Reference Guide for ACLS Analysis, 12-Lead EKG Strip Review, AV Block & Bundle Branch Block

[SIZE DETAILS] proper handling with dimensions of 30 x 15 cm.

$5.69

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.