Show The First N Items In A List With CSS

Show The First N Items In A List With CSS

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

The content of this field is kept private and will not be shown publicly.
CAPTCHA
14 + 4 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Related Content

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more