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

Cross-border PHP document

CSS: Achieving Layered Effect with Child Image Over Parent Background Image

Having trouble with images not displaying in IE10 on HTML5 canvas?

"How can I make a dropdown open and close when a button is clicked, but also close when clicking outside of it at the same

Is it possible to alter CSS attributes dynamically without setting a limit on the number of changes that can be made?

Will my JavaScript function be triggered when the page is resized while printing?

How to achieve a reverse slideToggle effect with jQuery when refreshing the page

What's preventing me from tapping on hyperlinks on my mobile device?

Discovering elements with Selenium

Font animation experiencing limited functionality

Troubleshooting the pushstate back function in HTML5 and jQuery

Is there a way to simulate pressing a keyboard button using jQuery?

The Bootstrap 3.3 Carousel is stationary and does not rotate

Changing images dynamically in tinymce using JavaScript

Update the html() function to include any content that has been typed into a

Is your Bootstrap input displaying the has-error class with a glyphicon, but the alignment is not vertically centered?

Setting character limits within textareas based on CSS classes in a dynamic manner

Angular routing template failing to execute inline JavaScript code

Issues with plugins in Rails 4 are causing functionality to not be operating

What is the maximum character limit for the JQuery validation plugin?