0

Como posso aplicar os mesmos atributos e as mesmas classes mas com iDs de produtos diferentes? O seguinte código esta funcionando porem acho que dá para simplificar esse 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;}
3
  • a .postid-3532 .mnm_message_content {margin: 0 10px 0 10px; border: 0;} é diferente das outras mesmo ? Commented 4/03/2020 às 13:22
  • Tentei colocar dessa forma mas nao funcionou: .postid-2201.postid-3526.postid-3532 .product .summary .cart .quantity {margin: 0px; display: none;} Commented 4/03/2020 às 13:26
  • Sim Pedro, Cada postid é um produto que esta no Woocommerce e eu quero aplicar esse css apenas nesses 3 produtos Commented 4/03/2020 às 13:38

1 Resposta 1

3

Você consegue fazer isso manipulando o seletor do elemento, no caso usei ^= que irá selecionar todos os elementos que começa com classe-, ou seja, irá atribuir a propriedade background-color para os elementos p que tenham uma classe que comece com 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>

Nesse caso todos os postid receberam a estilização.


  • No seu caso, como queres apenas nesses três postid, então basta criar seletores agrupados, já que iram receber a mesma estilização, ficaria dessa forma:

    .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 }
    

Referência: Seletores

4
  • Obrigado! Sou meio leigo no assunto, este css eu coloquei no "Custom CSS" do meu template no Wordpress. Como faço para limitar o postid para apenas esses 3 produtos (2201, 3526 e 3532)? Caso contrario vai aplicar em todos, não é isso? Commented 4/03/2020 às 13:21
  • Caso seja produtos diferentes terá que usar .postid-1, postid-2, postid-3{ ... }, separando por virgulas cada seletor Commented 4/03/2020 às 13:28
  • Alterei a resposta Commented 4/03/2020 às 15:58
  • 1
    Valeu Pedro! Já ajudou bastante. Commented 4/03/2020 às 19:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .