Home

Set CSS to only affect an x-length list

Think scenario where you want you CSS only effect list that haw 3. items. In my chase, I wanted to show list different way when there is 1. 2. or 3. items. All so I can only make CSS changes to site so here is an example how to do it.

Source where I read this.
More to selectors

	/* one item */
	.l-listItem:first-child:nth-last-child(1) {
		width: 100%;
	}
	
	/* two items */
	.l-listItem:first-child:nth-last-child(2),
	.l-listItem:first-child:nth-last-child(2) ~ .l-listItem {
		width: 50%;
	}
	/* three items */
	.l-listItem:first-child:nth-last-child(3),
	.l-listItem:first-child:nth-last-child(3) ~ .l-listItem {
		width: 33%;
	}

	

Leave a Reply

Your email address will not be published.