# Inline List color

**URL:** https://community.glideapps.com/t/inline-list-color/40921
**Category:** Ask for Help
**Created:** [April 20, 2022, 1:55am UTC](https://community.glideapps.com/t/inline-list-color/40921 "2022-04-20T01:55:33Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Juankar\_Guate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/juankar_guate/32/41597_2.png) [@Juankar\_Guate](https://community.glideapps.com/u/Juankar_Guate)
#### Post date: [April 20, 2022, 1:55am UTC](https://community.glideapps.com/t/inline-list-color/40921/1 "2022-04-20T01:55:34Z")

</div>

How to change the color of each item in an Inline list

---

<div class="post-metadata">

### Author: ![resepsionis\_ganteng](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/resepsionis_ganteng/32/39081_2.png) [@resepsionis\_ganteng](https://community.glideapps.com/u/resepsionis_ganteng)
#### Post date: [April 20, 2022, 1:58am UTC](https://community.glideapps.com/t/inline-list-color/40921/2 "2022-04-20T01:58:24Z")

</div>

what color part?  
text?

---

<div class="post-metadata">

### Author: ![Juankar\_Guate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/juankar_guate/32/41597_2.png) [@Juankar\_Guate](https://community.glideapps.com/u/Juankar_Guate)
#### Post date: [April 20, 2022, 2:03am UTC](https://community.glideapps.com/t/inline-list-color/40921/3 "2022-04-20T02:03:06Z")

</div>

change the background color with different colors each

---

<div class="post-metadata">

### Author: ![resepsionis\_ganteng](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/resepsionis_ganteng/32/39081_2.png) [@resepsionis\_ganteng](https://community.glideapps.com/u/resepsionis_ganteng)
#### Post date: [April 20, 2022, 2:06am UTC](https://community.glideapps.com/t/inline-list-color/40921/4 "2022-04-20T02:06:47Z")

</div>

you can use css to change it

---

<div class="post-metadata">

### Author: ![Juankar\_Guate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/juankar_guate/32/41597_2.png) [@Juankar\_Guate](https://community.glideapps.com/u/Juankar_Guate)
#### Post date: [April 20, 2022, 2:10am UTC](https://community.glideapps.com/t/inline-list-color/40921/5 "2022-04-20T02:10:23Z")

</div>

That’s the detail, I don’t know how to write the css code to change the background color, but make it different in each item

---

<div class="post-metadata">

### Author: ![resepsionis\_ganteng](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/resepsionis_ganteng/32/39081_2.png) [@resepsionis\_ganteng](https://community.glideapps.com/u/resepsionis_ganteng)
#### Post date: [April 20, 2022, 2:13am UTC](https://community.glideapps.com/t/inline-list-color/40921/6 "2022-04-20T02:13:28Z")

</div>

check here,  
maybe it can help

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191):
>
> Hello, Glide community slight_smile With some glider we want to make a showcase with all the Most Beautiful Design App. Specially the App with a innovant or Nice Design ! If you think your App Match the topic be free to comment with some explanation of your app Regard Stan

---

<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: [April 21, 2022, 12:17am UTC](https://community.glideapps.com/t/inline-list-color/40921/7 "2022-04-21T00:17:21Z")

</div>

Hopefully this can help.

> [@How would I use CSS/nth term in targeting lists?](https://community.glideapps.com/t/how-would-i-use-css-nth-term-in-targeting-lists/39601/2):
>
> I haven’t replied back to you in the original thread, so I will do it here. I think you’re looking for something like this. \<pre\>\<span\>\<style\> [data-test="list-item"] { background: rgb(25,25,25); border-radius: 10px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px; } [data-test="app-vertical-list"] .selected-item-list-item-4 { background: rgb(230,230,230) !important; } Glide has a special scheme for naming these list item classes. It starts from the list title (which I d…

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d9ff961c1e95af04f77a42036f7f9ef637a5d95a.png)

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

[data-test="app-vertical-list"] .selected-item-list-item-1 {
background: red !important;
}

[data-test="app-vertical-list"] .selected-item-list-item-2 {
background: green !important;
}

[data-test="app-vertical-list"] .selected-item-list-item-4 {
background: black !important;
}

[data-test="app-vertical-list"] .selected-item-list-item-5 {
background: blue !important;
}

[data-test="app-vertical-list"] .textStyle {
color: white;
}

[data-test="app-vertical-list"] .navigationIcon {
color: white;
}

```