CSS of different Ids for the same Classes

Question

How can I apply the same attributes and the same classes but with different product ids? The following code is working but I think we can simplify this CSS

.postid-2201 .product .summary .cart .quantity {margin: 0px; display: none;}
.postid-3526 .product .summary .cart .quantity {margin: 0px; display: none;}
.postid-3532 .product .summary .cart .quantity {margin: 0px; display: none;}

.postid-2201 .product_title {display: none;}
.postid-3526 .product_title {display: none;} 
.postid-3532 .product_title {display: none;} 

.postid-2201 .product_meta {display: none;}
.postid-3526 .product_meta {display: none;}
.postid-3532 .product_meta {display: none;}

.postid-2201 .product .entry-summary .price {display: none;}
.postid-3526 .product .entry-summary .price {display: none;}
.postid-3532 .product .entry-summary .price {display: none;}

.postid-2201 .fusion-separator.sep-solid {display: none;}
.postid-3526 .fusion-separator.sep-solid {display: none;}
.postid-3532 .fusion-separator.sep-solid {display: none;}

.postid-2201 .mnm_message_content {margin: 0 0 0 10px; border: 0;}
.postid-3526 .mnm_message_content {margin: 0 0 0 10px; border: 0;}
.postid-3532 .mnm_message_content {margin: 0 10px 0 10px; border: 0;}

.postid-2201 .woocommerce-error {display: none;}
.postid-3526 .woocommerce-error {display: none;}
.postid-3532 .woocommerce-error {display: none;}

.postid-2201 form.cart {margin: 0px; display: grid;}
.postid-3526 form.cart {margin: 0px; display: grid;}
.postid-3532 form.cart {margin: 0px; display: grid;}

.postid-2201 button.single_add_to_cart_button.button.alt.disabled { background-color: #dadada; cursor:Default;}
.postid-3526 button.single_add_to_cart_button.button.alt.disabled { background-color: #dadada; cursor:Default;}
.postid-3532 button.single_add_to_cart_button.button.alt.disabled { background-color: #dadada; cursor:Default;}

Answer 1

You can do this by manipulating the element selector, in case I used ^= that will select all the elements that begins with classe-, ie, will assign the property background-color for the elements p which have a class beginning with classe-

p[class^="classe-"]{
    background-color: #f00
}

<p class="classe-1">Texto 1</p>
<p class="classe-2">Texto 2</p>
<p class="classe-3">Texto 3</p>
<p class="classe-4">Texto 4</p>

In that case all the postid received the stylization.

---

• In his case, how do you want only on those three postid, then just create grouped selectors, since they will receive the same styling, would be this way:

  .postid-2201 .product .summary .cart .quantity,
  .postid-3526 .product .summary .cart .quantity,
  .postid-3532 .product .summary .cart .quantity { margin: 0px; display: none }
  
  .postid-2201 .product_title,
  .postid-3526 .product_title, 
  .postid-3532 .product_title, 
  .postid-2201 .product_meta,
  .postid-3526 .product_meta,
  .postid-3532 .product_meta,
  .postid-2201 .product .entry-summary .price,
  .postid-3526 .product .entry-summary .price,
  .postid-3532 .product .entry-summary .price,
  .postid-2201 .fusion-separator.sep-solid,
  .postid-3526 .fusion-separator.sep-solid,
  .postid-3532 .fusion-separator.sep-solid,
  .postid-2201 .woocommerce-error,
  .postid-3526 .woocommerce-error,
  .postid-3532 .woocommerce-error { display: none }
  
  .postid-2201 .mnm_message_content,
  .postid-3526 .mnm_message_content,
  .postid-3532 .mnm_message_content { margin: 0 10px 0 10px; border: 0 }
  
  .postid-2201 form.cart,
  .postid-3526 form.cart,
  .postid-3532 form.cart { margin: 0px; display: grid }
  
  .postid-2201 button.single_add_to_cart_button.button.alt.disabled,
  .postid-3526 button.single_add_to_cart_button.button.alt.disabled,
  .postid-3532 button.single_add_to_cart_button.button.alt.disabled { background-color: #dadada; cursor:Default }
  

---

Reference: Selectors