CSS not selector issue

I have a page with <body id="index"> that i want to exclude from being affected by some css. If i try this it doesn't work and just affects all pages on my website.

@media (max-width: 991px){
body:not(#index) #products .product-miniature .product-container div.left-block .product-image img, .featured-products .product-miniature .product-container div.left-block .product-image img, .product-accessories .product-miniature .product-container div.left-block .product-image img, .product-miniature .product-container div.left-block .product-image img, .category-products .product-miniature .product-container div.left-block .product-image img{
    width: 100px;
    height: 100px;
}}

@media (max-width: 991px){
body:not(#index) #products .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, .product-miniature, .category-products .product-miniature{
    height: 175px;
}}

Solution

The not applies only to the selection it is in. That is the same behaviour as any other part of a selector. You need to reset it for each one in the list. For example as you have done for img as part of a selector.

Here’s the first declaration. I have put them on separate lines here to make it a bit easier to read. You don’t need to do this but you’d do need to put the body:not(#index) before all of them.

body:not(#index) #products .product-miniature .product-container 

div.left-block .product-image img, 
body:not(#index) .featured-products .product-miniature .product-container div.left-block .product-image img, 
body:not(#index) .product-accessories .product-miniature .product-container div.left-block .product-image img, 
body:not(#index) .product-miniature .product-container div.left-block .product-image img, body:not(#index) .category-products .product-miniature .product-container div.left-block .product-image img {
    width: 100px;
    height: 100px;
}