Magento 2: How to only apply css in catalog product page in grid view but not the list view

Question

If i change the css in the grid view, but and the css will also apply to the list view, which is i don't want it.

How can i solve that?

Thank you.

Answer 1

You can set the nesting selectors for each different class in the same view (like the @Haim said), or just divide into two LESS files imported into your _module.less for the Catalog module and set the parent nesting with each class so you have everything in a better order & modular.

Answer 2

There's a parent class name that differentiates between list and grid view. For list view use .products-list and for grid view use .products-grid.

If you just set:

.product-item-name > a, .product.name  > a {
    color: red;
    text-decoration: none
}

Then the item name will be red whether in grid or list view.

if you add the product-list selector then it will only affect the list view.

.products-list .product.name a {
    color: red;
    text-decoration: none
}

if you add the product-grid selector then it will only affect the grid view

.products-grid .product.name a {
    color: red;
    text-decoration: none
}