Show The First N Items In A List With CSS

Note: This post is over two years old and so the information contained here might be out of date. If you do spot something please leave a comment and we will endeavour to correct.

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.

li {
  display: none;
}
li:nth-child(-n+2){
  display: list-item;
}

This will set the list item back to it's default of 'list-item', but you can set it to 'block' if you are using the list items as blocks of content. Be careful with the above styles as they will effect all list elements in your page. You'll need to surround these selectors with a ul or ol element and a class so that you are only targeting the list you want to target.

This is a neat (and devious) way of preventing additional main menu items from breaking the layout. If you are interested in seeing it at work then I created a codepen to show it in action.

css

Add new comment

Related Content

Creating A Mouse "Looking" Script With JavaScript

24th November 2024

I've seen lots of "our team" pages over the years, but one of the ones that stood out to me the most were those that had an interactive element to them. For me, it adds a bit of personality to the page and makes it feel more alive than a bunch of silhouettes of the directors.

Creating A Simple Pie Chart With CSS

25th December 2022

A pie chart is a great way of showing the relationship between numbers, especially when showing percentages. Drawing a pie chart from scratch takes a fair amount of maths to get working and so people usually go for third party charting libraries in order to add charts to the page.

Simple Horizontal Segmented Bar Chart With CSS

13th March 2021

Bar charts are powerful ways to show the relationships between different data items. If the data you want to show is discrete then a simple horizontal segmented bar chart is a good idea. You can easily change a collection of numbers into a related set of attributes.

Displaying Tables As Block Elements On Mobile

2nd February 2021

The experience of using tables in websites whilst on a mobile can be pretty poor. Things tend to get a bit squashed and displaying the information can be a challenge just to fit the table onto the screen.

The iframe srcdoc Attribute

6th December 2020

I was working on a web page generation program recently and was looking for a way to present different versions of the same page with slight differences in the markup and styles. Although using the iframe element came to mind I wasn't keen on rendering out lots of different versions of the page and then referencing them individually in each iframe.

Drupal 8: Theming With Tailwind CSS

8th March 2020

Upon a recommendation from someone in my local Drupal user group I decided to give Tailwind CSS a go. The ultimate aim of this was to replace the base theme I am using here with a more stripped down theme. At the time of writing this I am using the Cog theme, and whilst it has it's merits, I find that it's a little too much for this simple site.