Problema gestione classi fra due elementi HTML

[cnigpp]

Ciao a tutti
sto facendo delle prove su di un sito di e-commerce. Per ciascun prodotto ho due pulsanti, "Vedi scheda" e "Acquista", così dichiarati:

<a href="http://www.miosito.it/prodotto/prodottoX/" rel="nofollow" class="add_to_cart_button button product_type_simple" style="bottom:80px!important;background-color:#fff;"> Vedi Scheda </a>

<a href="/prodotti/?add-to-cart=3461" rel="nofollow" data-product_id="3461" data-product_sku="confetturaextrapesche" data-quantity="1" class="button add_to_cart_button product_type_simple">Acquista</a>

Avrei bisogno di modificare l'aspetto del pulsante "Acquista", ma quando nel file CSS inserisco

.button.add_to_cart_button.product_type_simple {
   background: #45d127 !important;
   border-color: #45d127 !important;
   color: white !important;
}

viene modificato l'aspetto di entrambi i pulsanti. Qualche suggerimento?

[carlomarangoni]

Si vede che entrambi i pulsanti hanno la stessa classe.
Dai al punsante acquista un id univoco e cambia l'aspetto lì

[cnigpp]

Le classi dei tag <a> sono diverse però...

[KillerWorm]

Ciao.

Le classi dei tag <a> sono diverse però...

Non è esatto, le classi dei due elementi sono esattamente le stesse.
Come accennato da carlomarangoni, entrambi gli elementi hanno la stessa classe (o meglio, la stessa serie di classi).

Nota che i due elementi hanno entrambi 3 classi ciascuno, ma queste sono identiche anche se disposte in ordine differente:

class="add_to_cart_button button product_type_simple"

e

class="button add_to_cart_button product_type_simple"

Cioè ognuno di questi due elementi potrà essere selezionato attraverso un selettore che riporti una qualsiasi combinazione delle tre classi: add_to_cart_button, button, product_type_simple.

Il tuo selettore css .button.add_to_cart_button.product_type_simple rientra tra questi casi.
Se tu modifichi l'ordine delle classi, nel selettore o nell'attributo class dei suddetti elementi, non cambierà comunque niente perché tale selettore corrisponderà sempre ad entrambi gli elementi.

Per risolvere potresti utilizzare delle classi differenti, in modo da poter distinguere effettivamente i vari elementi.
Ad esempio puoi inserire la classe acquista, per cui avrai:

class="button add_to_cart_button product_type_simple acquista"

e specificare il selettore in questo modo:

.button.add_to_cart_button.product_type_simple.acquista

oppure così:

.button.acquista

o semplicemente:

.acquista

o come meglio ti pare.

Oppure usare un id, come già suggerito, tenendo comunque conto che in questo caso l'id è vincolato dal fatto che deve essere univoco (cioè non puoi avere id uguali all'interno della stessa pagina).

[CBF2k15]

quoto killerworm e carlomarangoni, se invece non puoi accedere al codice serverside per assegnare l'ID al pulsante acquista cerca di isolarlo usando nel css non solo le classi ma anche i tag in cui è annidato (sperando che siano diversi da quelli dell'altro pulsante)

[CBF2k15]

Hai risolto in qualche modo alla fine?