Custom CSS - nth-of-type (Turbo OOTSB Theme)

Solved
msoder
Excursionist
29 0 9

Hi all,

I'm trying to set different border-radius numbers for each image on my collection list. When I attempt to use nth-of-type in custom css the nth-of-type(1) selector targets all three images. Any tips?

Cheers!

Screenshot 2021-06-19 at 16.12.23.png

0 Likes
satsinghrana
Shopify Partner
194 17 36

Hi,

You should target the parent and then apply the CSS using nth-child(child index here)

 

Thanks!

Please Like and Accept Solution if it helps you.
Get Support for Customization right away CLICK ME TO GET HELP NOW.
Our Shopify Apps: HERE
0 Likes
msoder
Excursionist
29 0 9

Thanks for the reply. I've tried that in my code using:

.list-collections img:nth-child(1) {
border-radius: 25px 0px 0px 25px;
}
 
Still get the same result however. https://mathias-dev-test.myshopify.com/ (pass: saycew)
0 Likes
satsinghrana
Shopify Partner
194 17 36

This is an accepted solution.

Oh ok, please use the below code and let me know.

.thumbnail.medium-down--one-half:nth-child(0) img {
    border-radius: 50px;
}
.thumbnail.medium-down--one-half:nth-child(1) img {
    border-radius: 40px;
}
.thumbnail.medium-down--one-half:nth-child(2) img {
    border-radius: 30px;
}
Please Like and Accept Solution if it helps you.
Get Support for Customization right away CLICK ME TO GET HELP NOW.
Our Shopify Apps: HERE
msoder
Excursionist
29 0 9

That worked a charm. Thanks a lot for your time!

0 Likes