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

Ask for Help
1

Hi Guys-
I’m trying to style a list in CSS and set the third item in the list to a different background color, but I am unable to get the code to work. All of the items in my list are following the rules from the general one and cannot get the third item to show something different. I’m not sure what I’m doing wrong, so any ideas help!

Thanks!
James

[data-test="list-item"] {
background: rgb(25,25,25);
border-radius: 10px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
}

[data-test="list-item"] :nth-child(3) {
background: rgb(230,230,230);
}
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
3

Thanks so much! I wasn’t sure if I was supposed to create a new thread since this technically was a different topic at the start of the thread. Thanks for clarifying.

1 Like
4

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