PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

How to Add Commas Between a List of Items Dynamically with CSS

January 12, 2021
in Web Dev
280 12
How to Add Commas Between a List of Items Dynamically with CSS


Imagine you have a list of items. Say, fruit: Banana, Apple, Orange, Pear, Nectarine

We could put those commas (,) in the HTML, but let’s look at how we could do that in CSS instead, giving us an extra level of control. We’ll make sure that last item doesn’t have a comma while we’re at it.

I needed this for a real project recently, and part of the requirements were that any of the items in the list could be hidden/revealed via JavaScript. The commas needed to work correctly no matter which items were currently shown.

One solution I found rather elegant solution is using general sibling combinator. We’ll get to that in a minute. Let’s start with some example HTML. Say you start out with a list of fruits:

<ul class="fruits">
  <li class="fruit on">Banana</li>
  <li class="fruit on">Apple</li>
  <li class="fruit on">Orange</li>
  <li class="fruit on">Pear</li>
  <li class="fruit on">Nectarine</li>
</ul>

And some basic CSS to make them appear in a list:

.fruits {
  display: flex;
  padding-inline-start: 0;
  list-style: none;
}

.fruit {
  display: none; /* hidden by default */
} 
.fruit.on { /* JavaScript-added class to reveal list items */
  display: inline-block;
}

Now say things happen inside this interface, like a user toggles controls that filter out all fruits that grow in cold climates. Now a different set of fruits is shown, so the fruit.on class is manipulated with the classList API.

So far, our HTML and CSS would create a list like this:

BananaOrangeNectarine

Now we can reach for that general sibling combinator to apply a comma-and-space between any two on elements:

.fruit.on ~ .fruit.on::before {
  content: ', '; 
}

Nice!

You might be thinking: why not just apply commas to all the list items and remove it from the last with something like :last-child or :last-of-type. The trouble with that is the last child might be “off” at any given time. So what we really want is the last item that is “on,” which isn’t easily possible in CSS, since there is nothing like “last of class” available. Hence, the general sibling combinator trick!

In the UI, I used max-width instead of display and toggled that between 0 and a reasonable maximum value so that I could use transitions to push items on and off more naturally, making it easier for the user to see which items are being added or removed from the list. You can add the same effect to the pseudo-element as well to make it super smooth.

Here’s a demo with a couple of examples that are both slight variations. The fruits example uses a hidden class instead of on, and the veggies example has the animations. SCSS is also used here for the nesting:

I hope this helps others looking for something similar!



Source link

Share219Tweet137Share55Pin49

Related Posts

On Auto-Generated Atomic CSS | CSS-Tricks
Web Dev

On Auto-Generated Atomic CSS | CSS-Tricks

Robin Weser’s “The Shorthand-Longhand Problem in Atomic CSS” in an interesting journey through a tricky problem. The point is...

January 15, 2021
How to Add Commas Between a List of Items Dynamically with CSS
Web Dev

3 Approaches to Integrate React with Custom Elements

In my role as a web developer who sits at the intersection of design and code, I am drawn...

January 15, 2021
Community Resources, Weekly Newsletter, And Boosting Skills Online — Smashing Magazine
Web Dev

Smashing Workshops & Audits — Smashing Magazine

About The AuthorJuggling between three languages on a daily basis, Iris is known for her love of linguistics, arts,...

January 15, 2021
4 Lessons Web App Designers Can Learn From Google — Smashing Magazine
Web Dev

The Report — Smashing Magazine

About The AuthorSuzanne Scacca is a former WordPress implementer, trainer and agency manager who now works as a freelance...

January 15, 2021
Next Post
Fixing Smooth Scrolling with Find-on-Page

Fixing Smooth Scrolling with Find-on-Page

I Just Wanna Make Sure You Understand the WordPress.com Business Plan

I Just Wanna Make Sure You Understand the WordPress.com Business Plan

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Troubleshooting Amazon API Gateway with enhanced observability variables : idk.dev

Troubleshooting Amazon API Gateway with enhanced observability variables : idk.dev

September 4, 2020

What’s Coming To VueX? — Smashing Magazine

December 24, 2020
Vue 3

Vue 3

September 19, 2020
Understanding TypeScript Generics — Smashing Magazine

A Practical Introduction To Dependency Injection — Smashing Magazine

December 30, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In