How to hide a Webflow section when its CMS collection is empty
If you've ever built a Webflow page that pulls items from a CMS collection into a section, you've probably run into this problem: when the collection is empty, the section still renders, with its heading, intro text, padding, and an awkward empty space where the items should be.
Webflow's native Conditional Visibility can hide elements inside collection lists, but it can't hide an entire section that contains the collection list. That's because the section sits outside the collection scope, so it has no awareness of whether the collection has any items in it.
This guide shows a one-line CSS solution that fixes this cleanly, with no JavaScript, no extra DOM elements, and no special Webflow plugins required.
The scenario
Imagine you have a section on a page that looks something like this:
- A
section_resourcessection wrapper - Inside it, a heading like "Related resources"
- A CMS Collection List that outputs items with a class of
resource-card_wrapper
When the collection has items, everything works perfectly. When it's empty, you're left with the section, the heading, the padding, and a blank gap where the cards should be. Not ideal.
The solution: one CSS rule
Add this to your page's custom code (or to the site-wide custom code if the section appears in multiple places):
.section_resources:not(:has(.resource-card_wrapper)) {
display: none;
}That's it. Replace .section_resources with your section's class and .resource-card_wrapper with the class on your collection item wrapper.
How it works
The :has() pseudo-class is a relatively new CSS feature, sometimes called the "parent selector". It lets you style an element based on its descendants.
Read out loud, the rule says: "Select any .section_resources that does not have a .resource-card_wrapper inside it, and hide it."
When the collection is populated, the section contains at least one .resource-card_wrapper, so the :not(:has(...)) doesn't match and the section stays visible. When the collection is empty, Webflow renders nothing inside the collection list, no wrappers exist, the selector matches, and the section is hidden.
Where to put the code
For a single page, open the page settings in the Designer (the small cog icon next to the page name in the left panel), scroll down to the Custom code section, and paste the rule inside a <style> tag in the Inside <head> tag field:
<style>
.section_resources:not(:has(.resource-card_wrapper)) {
display: none;
}
</style>For a site-wide rule (if the same section pattern appears across multiple page types), use Site settings > Custom code > Head code instead.
Browser support
The :has() selector is supported in all modern browsers, including Chrome, Edge, Safari, and Firefox. If you need to support older browsers, you can fall back to a small JavaScript snippet that does the same check:
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.section_resources').forEach(function (section) {
if (section.querySelectorAll('.resource-card_wrapper').length === 0) {
section.style.display = 'none';
}
});
});
</script>Functionally identical, just slightly more verbose and dependent on JavaScript loading.
Tips and gotchas
Be specific with your selector. If .resource-card_wrapper appears elsewhere on the page outside the section, the rule still works because :has() only looks at descendants of .section_resources. But if you're worried about future class collisions, you can scope the inner selector to a more direct child, e.g. .section_resources:not(:has(.collection-list .resource-card_wrapper)).
Test the empty state. The easiest way to test is to temporarily filter the collection list down to zero items using Webflow's collection list settings (filter by a field that no item matches). The section should disappear immediately in the published site.
Consider an empty state instead. Hiding the section is the right call when the section is non-essential, but sometimes a friendly "Nothing here yet, check back soon" message is a better experience. Webflow's collection list element has a built-in empty state slot you can style for exactly this.
Wrapping up
Webflow's native CMS is powerful, but conditional visibility at the section level remains a gap. The :has() selector closes it neatly. One line of CSS, no JavaScript dependencies, and it handles every collection list pattern you're likely to throw at it.
