Using :nth-child to hide collection items

Hi there,

I´m trying to hide the first 5 items of a collection list by using:

<style>
	.list :nth-child(-n+5) {
		display: none;
	}
</style>

But this hides all collection-list-items. Using (n+5) is working fine.
Would appreciate any help.


Here is my site Read-Only: LINK

:nth-child is a Pseudo-classes - CSS: Cascading Style Sheets | MDN and needs to be added to an element. Example: .list:nth-child(-n + 5)

1 Like

Thanks for the reply @webdev.
I tried that, but than the whole list disappears.
I recorded a video showing the behavior.

I also tested the script with (n + 5) instead of (-n + 5). This is showing 5 items, but the inner html content gets also display: none.
Is there anything else I´m doing wrong? :face_with_monocle:

Hi @Nilson you should target item instead.

.item:nth-child(-n+5) {
  	display: none;
    /* background: red; */ 
	}

as you can see in DOM, Webflow adds its custom class w-dyn-item so you can use it instead.

.w-dyn-item:nth-child(-n+5) {
  	display: none;
    /* background: red; */ 
	}

when you look into MDN docs :nth-child() - CSS: Cascading Style Sheets | MDN you will see in their example adding :nth-child() to li selector and formula is applied on all siblings of an identical element type. More in MDN docs.

Thank you! That worked :blue_heart: