# Add css to each list item

**URL:** <https://community.glideapps.com/t/add-css-to-each-list-item/47145>\
**Category:** Ask for Help\
**Created:** [August 18, 2022, 6:02pm UTC](https://community.glideapps.com/t/add-css-to-each-list-item/47145 "2022-08-18T18:02:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ideia](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ideia/32/46384_2.png) [@ideia](https://community.glideapps.com/u/ideia)\
**Post date:** [August 18, 2022, 6:02pm UTC](https://community.glideapps.com/t/add-css-to-each-list-item/47145/1 "2022-08-18T18:02:09Z")

</div>

Hey there, my first post here!

I’m working on a chat application and I want to show how many unread messages each chat has.

With this code:

```auto
<pre><span><style>

*.selected-item-list-item-1::before {
content: "2";
position: absolute;
font-size: 11px;
font-weight: 800;
color: white;
 padding-left: 4.5px;
 padding-top:0.5px;
  bottom: 5px;
 right: 12px;
  margin-left: 20px;
  z-index: 2;
  height: 15px;
  width: 15px;
  background-color: red;
  border-radius: 50%;
}

</style>

```

I’m achieving it:

![WhatsApp Image 2022-08-18 at 14.59.46](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/b/7b2609943d4fd2d36db967202643c395143ba7b5.jpeg)

But that’s just a test with a different table.  
With the right table, which is a Glide Table, that’s not working.

I tested the code with another Glide Table and it didn’t work either. It will work with some Google Sheet tables, but with others it doesn’t.

How can I solve this? Any ideas?

Thanks!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 19, 2022, 12:57am UTC](https://community.glideapps.com/t/add-css-to-each-list-item/47145/2 "2022-08-19T00:57:22Z")

</div>

Assuming you have a count for each row, and know the “order” number for each (list-item-1, list-item-2 etc), then you can do this:

- Create a template column for each row, with the variables being the “order” number and the “content” number. The template should just contain this part.

```auto
*.selected-item-list-item-X::before {
content: "Y";
position: absolute;
font-size: 11px;
font-weight: 800;
color: white;
 padding-left: 4.5px;
 padding-top:0.5px;
  bottom: 5px;
 right: 12px;
  margin-left: 20px;
  z-index: 2;
  height: 15px;
  width: 15px;
  background-color: red;
  border-radius: 50%;
}

```

- Create a joined list column to join all results of the template above, with the delimiter being 2 new line characters.

- Add a final template column with the structure being:

```auto
<pre><span><style>

{joined list content}

</style></span></pre>

```

Then display the final template column in a rich text component.

The hard part here is whether you know the order number in advance and/or can generate it. If you have filters/sorting that should be trickier.

---

<div class="post-metadata">

**Author:** ![ideia](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ideia/32/46384_2.png) [@ideia](https://community.glideapps.com/u/ideia)\
**Post date:** [August 19, 2022, 2:26pm UTC](https://community.glideapps.com/t/add-css-to-each-list-item/47145/3 "2022-08-19T14:26:42Z")

</div>

Hi there,  
Thanks for your reply! I managed to solve it yesterday doing basically what you’ve said. The problem was that \*.selected-item-list-item-X wasn’t working for the table I was using… So I created another table which receveid de right one’s row Id and did all the logic there.

I will mark the post as solved!

Have a nice day 🙂

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [August 20, 2022, 2:27pm UTC](https://community.glideapps.com/t/add-css-to-each-list-item/47145/4 "2022-08-20T14:27:39Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.