Choose all list elements except the final one

Question

Choose all list elements except the final one

I need to display a list of tags horizontally and add a comma after each item except for the last one.

Here is how I can achieve this using CSS:


ul.tags {
    list-style: none;
}

ul.tags > li {
    display: inline;
}

ul.tags > li:after {
    content: ", ";
}

ul.tags > li:last-of-type:after {
    content: "";
}

I also considered combining the last two rules like this:


ul.tags > li:not(ul.tags > li:last-of-type):after {
    content: ", ";
}

Unfortunately, this method did not work as expected. Is there another way to select all but the last <li> elements in the list?

html css css-selectors

Answer 1

Answer №1

To achieve the desired result, simply utilize the :last-of-type selector within the :not function, as demonstrated in the code snippet below. Keep in mind that the :not function only accepts simple selectors.

According to the specifications, simple selectors consist of a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

ul.tags > li:not(:last-of-type):after {
  content: ", ";
}
ul.tags {
  list-style: none;
}
ul.tags > li {
  display: inline;
}

<ul class='tags'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Answer 2

To achieve the desired result, simply utilize the :last-of-type selector within the :not function, as demonstrated in the code snippet below. Keep in mind that the :not function only accepts simple selectors.

According to the specifications, simple selectors consist of a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

ul.tags > li:not(:last-of-type):after {
  content: ", ";
}
ul.tags {
  list-style: none;
}
ul.tags > li {
  display: inline;
}

<ul class='tags'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Choose all list elements except the final one

Answer №1

Similar questions

Maintain the flow of a floated or absolutely positioned element using CSS

CSS Grid having trouble with wrapping elements

Having issues with Firefox rendering JavaScript and CSS correctly

Looking for a jQuery plugin that helps with form alignment?

Issue with animation transition not triggering on initial click

What causes the inconsistency between Chrome's print CSS emulation and the Print Preview feature?

Modifying element size using jQuery causes issues with maintaining a 100% height

Sneaky spam and ads embedded within Joomla template

Hey there, I was wondering if it's possible to modify the color of the navbar when scrolling on a specific page

Tips on updating the arrow icon after clicking on a dropdown menu

JavaScript functions cannot be applied to input fields in jQuery

What is the best method for loading multiple HTML files into a Div container?

Update the default monospaced font in Draft.js

Angular 2's subscribe method allows for actions to be taken in response to

Tips for centering the second content within a div block

Having trouble sending data to an API through jQuery: the function is not functioning properly

"Maximizing the power of Jquery's .each function. What

Using jQuery to make a PNG image draggable and allow it to overlap with

Switch between display modes by clicking using collections

How can you show a green check mark next to an input field in AngularJS after inputting valid data?