change image property when is-Selected in flickity

Question

I've been trying to get the image filter change from grayscale(1) to grayscale(0) when it's selected but it doesn't work for me :( The following CSS is what I have so far.

.main-carousel img {
    display: block;
    height: 200px;  
    filter: grayscale(1);
}

.carousel-cell.is-selected .img{
    filter: grayscale(0%);
}

                  <div class="main-carousel" data-flickity='{"percentPosition": false, "wrapAround": true}'>
                    <div class="carousel-cell"><img src="/images/carousel-1.jpg"></div>
                    <div class="carousel-cell"><img src="/images/carousel-2.jpg"></div>
                    <div class="carousel-cell"><img src="/images/carousel-5.jpg"></div>
                    <div class="carousel-cell"><img src="/images/carousel-3.jpg"></div>
                    <div class="carousel-cell"><img src="/images/carousel-4.jpg"></div>
                    <div class="carousel-cell"><img src="/images/carousel-6.jpg"></div>
                  </div>   

Answer 1

I must be so tired to not able to spot this mistake :( i have an extra period in front of img tag. The correct CSS as following.

.main-carousel img {
    display: block;
    height: 200px;  
    filter: grayscale(1);
}

.carousel-cell.is-selected img{
    filter: grayscale(0%);
}