CSS3 select remainder at end of list

Related searches

I'd like to know if there is any way to select the remainder of a list using CSS selectors. As an example:

Say I have a list of unknown length, but the number of elements I would like to display in each grouping (n) is known, but variable. For all elements, I would like to add margin-bottom, except for the remainder elements that come after the last complete grouping. This list is unknown length until time of render, so I am looking for a pure css method.

I am convinced this would be a challenging problem, a hard coded solution will not work because the number in each grouping is a variable.

I know it seems simple, but I have not found a combination of nth-child(), not(), ~, etc. that can achieve this. Furthermore, if I change the parameter for number of elements per row from 3 to 5, for example, the last 4 elements are what I would want to select.

Edit2: Sorry, I really should have clarified. I am using React/Redux framework and writing JavaScript and styled-components, but that being said:

As far as I am aware, I have no way of applying classes that would help separate this list AT ALL. I cannot group them into rows with classes, and furthermore I should add that for all intents and purposes, I am looking for a solution that uses only index logic.

My only hunch so far would be if I can figure out a way to pass the length of the list, and thereby calculate the remainder, but the length is unknown until the time of render.

Use the nth-child() selector

at your case:

 li:nth-child(13) {


 li:nth-child(14) {


Check this link for more details https://www.w3schools.com/cssref/sel_nth-child.asp

If you're interesting in selecting the last element of the list (or any that comes before it) you can use the :nth-last-child() selector

Check this out https://www.w3schools.com/cssref/sel_nth-last-child.asp

Useful :nth-child Recipes, In these simple “recipes” (really: expressions) I'll arbitrarily use a flat list of list To select the first element, you can use :first-child, or I bet you can guess how to Interestingly enough, :first-child was supported by IE 7, but it's not until IE 9 where the rest of this stuff is supported. Need some front-end development training? Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

This will select the last 3 li of the list.


Complex Selectors, The class selector identifies an element based on its class attribute value, Using the dollar sign denotes that the attribute value needs to end with the Here the li:nth-child(-n+4) selector is identifying the top four list items, leaving the rest of� With my mod query, I can select all the items in a list if the list is divisible by three, but I’ll need to apply different styles if there are remainders. (In the case of remainder 1, I’ll just need to count back in the CSS from the second-to-last element, instead of the last.

.container:not(:last-child) .element {
  margin-bottom: 10px;

Where .container is the container around all the rows, and .element is the individual numbered item (13 + 14 in your example)

CSS selectors, The following table summarizes CSS 2.1 selector syntax: E[lang|="en"], Matches any E element whose "lang" attribute has a hyphen-separated list of the user agent could simulate start and end tags for SPAN when inserting the The rest of the first formatted line will be 'blue' while the rest of the paragraph will be 'red'. Full list of CSS selectors, includes Selectors Level 3 and Selectors Level 4. At writing, Level 4 is in draft status and many of the new selectors have limited support in browsers. This list is also available grouped by category and by specification , where you can find examples of each selector.

Selectors Level 4, CSS implementations conformant to Selectors Level 4 must use the This is also called just a selector list when the type is either (The rest of the selector can match unrestricted; it's only the final The following selector represents an HTML a element with an href attribute whose value ends with ".html". Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

:nth-child(), The :nth-child() is a CSS pseudo-class selector that allows you to select divide the list items into 3 groups, put the remainder items in a fourth� list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed) list-style-position (specifies whether the list-item markers should appear inside or outside the content flow) list-style-image (specifies an image as the list item marker)

The syntax for selecting the first n number of elements is a bit counter-intuitive. You start with -n, plus the positive number of elements you want to select. For example, li:nth-child(-n+2) will select the first 2 li elements. Such explanation is even missing in the w3cshool for nth-child.

  • Sorry, I should have clarified that I am not looking for a hard-coded solution, I have access to the number of elements to be displayed in each row.