Sometimes you want your collection list to appear only if it has the right number of list items;
Sometimes, you even want an entire list-containing area of your layout to hide/show depending on the item count of that list.
Yes, you can, and it can all be done purely with CSS.
IMPORTANT: as @webdev notes in the Webflow forums, as of Jan-2023 the :has CSS pseudoselector has about 80% coverage in browsers and is not yet implemented by Firefox.
If 100% coverage is important to you, you may need to use a script based approach to this rather than the CSS one recommended here.
For all examples, let's assign that list or list-containing DIV an ID of listArea.
Add the custom code to your page or site /head area, or to an HTML Embed if you want it to take effect in the designer as well.
Collection Lists have the ability to show alternate content when they are empty, and you can make this alternate element blank. But what if you want to hide the entire section containing that list?
<style>
#listArea:not(:has(.w-dyn-item)) { display: none; }
</style>
You want the whole thing to appear only if there are X collection list items, and to disappear of there are more, or less than that.
<style>
#listArea:not(:has(.w-dyn-item:nth-last-child(3):first-child)) {
display: none;
}
</style>
NOTE: change 3 in the code to the exact number of items you want.
<style>
#listArea:has(.w-dyn-item:nth-last-child(3)) {
display: none;
}
</style>
NOTE: change 3 in the code to the maximum number of items you want, plus 1.
<style>
#listArea:not(:has(.w-dyn-item:nth-last-child(3))) {
display: none;
}
</style>
NOTE: change 3 in the code to the minimum number of items you want.
https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/