How would I use CSS/nth term in targeting lists?

Ask for Help
2

I haven’t replied back to you in the original thread, so I will do it here.

image
image424×857 22.6 KB

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 don’t include here but Glide still renders it) as selected-item-list-item-1. Then it comes to your 3rd item, which will be numbered 4.

Please note that this will affect all inline lists you have on the screen. If you want to target a specific list, use nth-of-type. Our forum’s library detailed it here.

5 Likes