CSS :first-child Guide for HubSpot Designers

The CSS :first-child selector is a powerful tool for anyone building pages in HubSpot, helping you style the first element in a container without adding extra classes or markup. Understanding how it works makes your style sheets cleaner, more flexible, and easier to maintain across your HubSpot website.

What the CSS :first-child Selector Does in HubSpot

The :first-child pseudo-class matches an element that is the first child of its parent. In a HubSpot page or template, that might be the first list item, the first paragraph in a rich text module, or the first card in a grid.

In other words, the browser checks the parent element, looks at all of its children, and then applies the styles only when your selector matches the very first one.

Basic Syntax of :first-child for HubSpot Pages

The syntax follows standard CSS and works seamlessly inside HubSpot design tools and coded files:

selector:first-child {
  /* styles here */
}

Common patterns include:

• li:first-child — style the first item of a navigation menu in a HubSpot header.
• p:first-child — style the first paragraph within a blog post body.
• div:first-child — style the first column or first card in a layout.

How :first-child Actually Works in HubSpot Layouts

To use :first-child correctly in HubSpot, you need to remember two rules:

1. The element must literally be the first child of its parent.
2. The selector must match both the element and its position.

For example, this rule:

p:first-child {
  font-weight: bold;
}

only applies when the <p> is the very first child under its parent. If there is a heading, image, or any other node before the paragraph inside a HubSpot rich text area, the rule will not fire.

Example with a List in a HubSpot Module

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

li:first-child {
  color: #ff6600;
}

Here, only the first list item is affected, which is ideal for emphasizing the leading item in a HubSpot navigation menu or feature list.

Common :first-child Use Cases in HubSpot Templates

When building or editing themes, templates, and modules, you can use :first-child to solve several layout problems without adding extra classes.

1. Remove Extra Spacing on the First Element

HubSpot rich text modules often contain multiple paragraphs, images, and headings. Instead of manually editing spacing, you can remove the top margin from only the first element:

.hs-richtext p:first-child {
  margin-top: 0;
}

This is useful for blog content, landing pages, and email templates to keep the first paragraph aligned with the design system.

2. Style the First Navigation Item in a HubSpot Menu

.header-nav li:first-child > a {
  font-weight: 600;
  text-transform: uppercase;
}

This approach emphasizes the first link — for example, the Home page or a primary offer in your HubSpot navigation.

3. Highlight the First Card in a Feature Grid

.feature-grid > div:first-child {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
}

This is helpful when your HubSpot pages use card-based layouts and you want to call attention to the first card without changing the module content.

How :first-child Differs from :first-of-type in HubSpot

:first-child is often confused with :first-of-type. In HubSpot pages, the distinction matters for complex rich text content.

• :first-child targets the first node of any type under the parent.
• :first-of-type targets the first element of a specific type, regardless of what comes before it.

Example:

<div class="content-module">
  <h2>Title</h2>
  <p>Intro paragraph</p>
  <p>More details</p>
</div>

.content-module p:first-child {
  color: red;
}

.content-module p:first-of-type {
  color: blue;
}

In this case:

• p:first-child matches nothing, because the first child is the <h2>.
• p:first-of-type matches the first paragraph, even though it is the second child.

Understanding this difference is critical when styling blog content or long-form landing pages in HubSpot.

Working with :first-child in Complex HubSpot Markup

Real-world HubSpot templates often include nested containers, modules, and automatically generated markup. Keep these tips in mind when using :first-child:

• Inspect the final HTML with your browser dev tools to see which element is truly first.
• Remember that comments, whitespace text nodes, or HubSpot-generated wrappers can affect what counts as the first child.
• Target a specific parent to avoid unexpected matches across your entire site.

Scoped Selectors in HubSpot Themes

To keep your CSS organized inside HubSpot themes, scope :first-child rules to theme containers:

.theme-section .columns > div:first-child {
  padding-left: 0;
}

This ensures the rule only affects the intended layout section and not every instance of columns across the portal.

Testing :first-child Styles in HubSpot

Before pushing changes live, test your :first-child rules thoroughly in your HubSpot environment:

1. Open the HubSpot design manager and edit the relevant stylesheet.
2. Use the preview feature or a test page to view the template.
3. Right-click the element and select “Inspect” in your browser to verify that your selector matches the right element.
4. Check multiple content variations, such as pages with and without headings, images, or additional modules at the top.

This process helps prevent layout issues when editors add new content to HubSpot pages later.

More Resources on CSS :first-child and HubSpot

To dive deeper into the behavior of :first-child and see more examples, review the original explanation here: CSS :first-child article on HubSpot. Pair that with your own theme documentation and component library to build reliable patterns for your team.

If you need strategic help planning your technical SEO or content strategy around HubSpot builds, you can also explore services from Consultevo for additional guidance.

Summary: Using :first-child Effectively in HubSpot

The CSS :first-child pseudo-class lets you:

• Style the first element in a parent without extra classes.
• Polish HubSpot layouts like menus, cards, and text blocks.
• Reduce manual overrides in modules and templates.

By understanding how :first-child works, how it differs from :first-of-type, and how HubSpot structures its HTML, you can create more consistent, maintainable styles and keep your design system clean across your entire site.

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

“`