Sometimes you want your collection list to appear only if it has the right number of list items;
- Contains at least one item
- Contains at least X items
- Contains no more than X items
- Contains a specific number of items, e.g. 3
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.
Examples
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.
Show if at least one item
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?
Show if the item count is exactly X
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.
NOTE: change 3 in the code to the exact number of items you want.
Show if the item count is less than X
NOTE: change 3 in the code to the maximum number of items you want, plus 1.
Show if the item count is more than X
NOTE: change 3 in the code to the minimum number of items you want.
References
https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/
FAQs
Answers to frequently asked questions.
