Besoins d'aidee CSS

Par chaoscss, il y a 1 an

Les bases HTML/CSS

Bonjour à tous,

Je viens solliciter votre aide. J'ai un site internet (WordPress/WooCommerce) spécialisé dans les compléments alimentaires. Pour le produit Whey Protéine, il y a des variations de saveur et de format.

Un ami m'a aidé à créer un code qui permet d'afficher une couleur différente lorsque je clique sur le bouton de sélection de la saveur : marron pour le chocolat et beige pour la vanille.

Le problème est que nous n'arrivons pas à synchroniser la couleur de la section Saveur avec le format (900 g). La couleur de la variation 900 g reste par défaut, c'est-à-dire rouge.

Voici le code CSS qu'il a mis en place pour les couleurs des saveurs : #chocolat-btn.selected { background-color: #D2691E; /* marron clair */ color: white; } #vanille-btn.selected { background-color: #F3E5AB; /* couleur vanille */ color: black; } .ast-single-variation[data-slug="Chocolat"].active { background: #6e2c00 !important; color: white; } .ast-single-variation[data-slug="Vanille"].active { background: #F3E5AB !important; color: white; } .ast-single-variation[data-slug="Chocolat"]:hover { background: #6e2c00 !important; color: white; } .ast-single-variation[data-slug="Vanille"]:hover { background: #F3E5AB !important; color: white; }

Ce que je veux

Je voudrais que la couleur de la section Saveur soit synchronisée avec le format sélectionné

quelqu'un pourrait m'aidée ? Merci a tous

1 réponse

popotte, il y a 1 an

Hello :)

Ca a l'air d'être un problème de priorité

Tout d'abord le CSS se lit de haut en bas, si tu mets un style sur un élément, puis un autre style sur le mêmem élément plus bas, c'est le dernier style qui sera pris en compte

Ensuite il y a la priorité sur la précision, si tu applique un style sur div, et que tu applique un style sur le même élément mais en mettant en séléecteur html>body>div, le plus précis sera prioritaire

Ensuite il y a la priorité sur la précision, si tu appliques un style sur un tag (div par ex) et que tu applique un style sur un id (#banner par ex) c'est l'ID qui sera prioritaire

Et enfin il y a la priorité sur l'attribut !important, il bypass toutes les règles de priorité pour dire explicitement que cet attribut est prioritaire

Donc deux solutions: soit tu supprime les attributs !important soit tu l'ajoute aux selected, et mets les selected en bas du CSS

https://openweb.eu.org/articles/cascade_css petit doc sur la priorité :)