How to display the first 3 list items and hide the rest with CSS nth-child?

I do not know which browser supports this, but you can pass a formula to :nth-of-type():

ul li:nth-of-type(1n+4) {display: none;} /* should match your case */

Further details on:


I altered it from (n+4) to (1n+4) since the first version works but isn’t valid. I use this in media queries to hide cut-down items on smaller screens.


b:nth-of-type(1n+4){ opacity:.3; }

Leave a Comment