×

HubSpot CSS :last-child Guide

/ CRM, Hubspot / By

HubSpot CSS :last-child Guide for Clean Layouts

Designers working with Hubspot themes, landing pages, and blog templates often need precise control over the last element in a list or container. The CSS :last-child pseudo-class is a powerful way to style that final item without adding extra classes or editing your HTML structure.

This guide walks you through what :last-child does, how it differs from similar selectors, and how you can apply it effectively in HubSpot page layouts and modules.

What the CSS :last-child Selector Does

The :last-child selector lets you target an element that is the final child of its parent in the DOM. This is perfect when you want to remove borders, add spacing, or change the look of the last item in a group.

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

In this example, only the very last <li> inside its parent list gets the custom margin.

How :last-child Works in HubSpot Templates

When you build pages or blogs in HubSpot, your HTML is often generated by drag-and-drop modules, blog listing templates, or theme partials. Understanding the document structure is key, because :last-child depends entirely on what the final child element actually is.

Key rules to remember:

  • It targets the last child element of a parent, regardless of type.
  • It is structural, not visual – it cares about the DOM tree, not how the page looks.
  • Whitespace and comments do not count as children, only elements do.

HubSpot Page Example with :last-child

Imagine a HubSpot rich text module outputting a list of benefits:

<ul class="benefit-list">
  <li>Fast setup</li>
  <li>Easy reporting</li>
  <li>Scales with your team</li>
</ul>

To remove the bottom border from the last item only, you might add:

.benefit-list li:last-child {
  border-bottom: none;
}

This works regardless of how many list items your HubSpot content editors add.

CSS :last-child vs :last-of-type in HubSpot

Developers working on HubSpot themes often confuse :last-child with :last-of-type. They behave differently, and understanding this difference avoids layout bugs.

Difference Between :last-child and :last-of-type

  • :last-child selects the final child of a parent, no matter what element it is.
  • :last-of-type selects the last child of a specific element type within a parent.

Consider this HTML structure:

<div class="hub-section">
  <p>Intro text</p>
  <p>Body text</p>
  <span>Note</span>
</div>
  • .hub-section p:last-child matches nothing, because the last child is a <span>.
  • .hub-section p:last-of-type matches the second <p>, which is the last paragraph in that container.

When styling blog post metadata, CTAs, or related post lists in HubSpot, choose the selector based on whether you care about the absolute last child or the last child of a specific type.

Practical :last-child Use Cases in HubSpot

You can apply :last-child in many HubSpot design patterns to avoid manual class management and keep templates clean.

1. Remove Border on the Last Navigation Item

For top navigation or footer menus, you often need divider lines between links, but not after the final item.

.main-nav li {
  border-right: 1px solid #ddd;
}

.main-nav li:last-child {
  border-right: none;
}

When editors reorder or add items in the HubSpot menu tool, the last-child rule still works with no extra configuration.

2. Adjust Spacing in HubSpot Blog Lists

Blog listing templates frequently display cards or rows with equal spacing except at the bottom. You can remove extra padding or margin from the last item.

.blog-listing .post-item {
  padding-bottom: 2rem;
  border-bottom: 1px solid #e5e5e5;
}

.blog-listing .post-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

This keeps your last blog card aligned neatly with the footer without requiring unique HubSpot classes.

3. Styling the Last CTA Block in a Column

HubSpot drag-and-drop sections often stack multiple CTA modules in a column. You may want the last one to have extra spacing or a different style.

.cta-stack .hs_cos_wrapper:last-child {
  margin-bottom: 0;
}

By targeting the final wrapper in the stack, you can avoid awkward gaps on long landing pages.

Common :last-child Gotchas in HubSpot

Because HubSpot often injects markup such as wrappers, modules, or system elements, :last-child can behave in unexpected ways. Keep these points in mind when debugging.

Check the Real DOM in HubSpot

Always inspect the final rendered HTML in your browser’s developer tools, not just the template source. Modules, global groups, and theme partials can change the order of elements.

  • An unexpected wrapper <div> may become the last child instead of the element you expected.
  • System elements like error messages or notices may appear after your target element.

Beware of Mixed Child Types

If a parent contains different element types, :last-child might match a node you did not intend:

<ul class="feature-list">
  <li>Feature one</li>
  <li>Feature two</li>
  <div class="promo">Special offer</div>
</ul>

Here, .feature-list li:last-child matches nothing, because the last child is a <div>. In such mixed structures it is usually better to refactor the HTML output of your HubSpot module or use a more specific combination of selectors.

Responsive Design Tips with :last-child in HubSpot

As HubSpot templates adapt from desktop to mobile, the number of visible items may change. :last-child remains reliable across breakpoints because it always targets the final element that remains in the DOM.

  • Use media queries to adjust spacing on the last element at different screen sizes.
  • Combine :last-child with utility classes for complex layouts.
  • Keep your module output consistent so the last child is predictable.
@media (max-width: 768px) {
  .pricing-columns .column:last-child {
    margin-bottom: 0;
  }
}

How to Implement :last-child in HubSpot CSS Files

You can add :last-child rules in several places within the HubSpot ecosystem:

  • Theme or template CSS files in the design manager.
  • Global stylesheet attached to your theme.
  • Page-specific or blog-specific styles, if needed.

Best practices for implementation include:

  1. Inspect the rendered page to confirm the parent and last child structure.
  2. Add minimal, targeted selectors to avoid conflicts.
  3. Test on different content variations (more items, fewer items) that editors might create in HubSpot.

Further Learning and Optimization

To go deeper into how the :last-child selector behaves in various layouts and to review more examples beyond HubSpot use cases, see the original reference article here: CSS :last-child explained.

If you want support combining clean CSS structure with SEO-focused architecture in your HubSpot projects, you can also explore consulting resources at Consultevo.

Summary

The CSS :last-child pseudo-class is an essential tool for polishing final details in HubSpot themes, pages, and blog layouts. By understanding how it interacts with the DOM tree, how it differs from :last-of-type, and where HubSpot might inject additional markup, you can style the last element of any group with confidence.

Used correctly, :last-child reduces the need for extra classes, keeps your templates lean, and helps maintain consistent, professional presentation across every HubSpot page.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Verified by MonsterInsights