1st December 2020 - 4 minutes read time
A common design method is to use list elements to create the layout of a menu or a section on a page. This is all fine until the users come along and create lots of list items that mess up the layout of the page. In CSS it is possible to show only the first few items in the list so that your users can't mess up the layout.
To show only the first 2 items in a list use the adjacent sibling combinator to hide the third element and everything after that.
li + li + li {display: none;}
You can add as many li items to this list as you need to to ensure that the layout of your page works with the correct number of elements.
You can also do the same thing in CSS3 using a default display:none on all list items and then just showing the first 2 items in the list using the :nth-child pseudo-class.