Utilisation de la fonction :checked

Bonjour,

J'utilise: une fonction :checked pour une checkbox que j'ai créée.
Le fait est que je voudrais changer l’arrière-plan d’un span défini par ID et CLASS.

J'ai donc déclaré cette checkbox dans ma page (j'utilise Wordpress)

Code:

---

<input type="checkbox" id="Jour1" class="Jour1" name="NUTRITION[]" value="Jour1"><label for="Jour1" id="Jour1">DONE</label>

---

Et dans le CSS

Code:

---

1 2	.Jour1:checked ~ .span#Jour1 { background: #7ac143 !important;

---

Le code html final analysé avec firefox ressemble à ceci:

Code:

---

1 2 3 4 5 6

<span class="collapseomatic arrowright colomat-close colomat-visited" id="Jour1" tabindex="0" title=" Jour 1 "> Jour 1 </span> <div id="target-Jour1" class="collapseomatic_content " style=""> <input type="checkbox" id="Jour1" class="Jour1" name="NUTRITION[]" value="Jour1"><label for="Jour1" id="Jour1">DONE</label> <br> jjjjjjjjjjjjjjjjj <br>

---

Le fait est que si j'utilise

Code:

---

1 2	.Jour1:checked ~ .span#Jour1 { background: #7ac143 !important;

---

je ne peux pas obtenir le fond de la bonne couleur ... rien ne change quand je coche la checkbox

Mais j’ai vérifié que j’accédais au bon endroit du code avec

Code:

---

1 2	.span#Jour1 { background: #7ac143 !important;

---

Et ici ça marche, le fond est de la bonne couleur.

quelqu'un pourrait-il m'aider sur ce sujet s'il vous plaît?

Je vous remercie

Bonjour,

1- En CSS, :checked n'est pas une "fonction", mais une "pseudo classe".

Citation:

---

La pseudo-classe :checked représente n'importe quel bouton radio (<input type="radio">), case à cocher (<input type="checkbox">) ou option (<option> d'un élément <select>) qui est coché ou activé (on).
L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe :checked ne s'applique plus à l'élément en question.

---

2- un id DOIT être UNIQUE :

Code:

---

1 2 3

<span ... id="Jour1" ...> Jour 1 </span> <div ...> <input type="checkbox" id="Jour1" ...>

---

3- Ce n'est pas .span, mais juste span :

Code:

---

.Jour1:checked ~ .span#Jour1 {

---

4- Ensuite, pout utiliser ~, il faut que l'élément visé soit APRÈS (c'est le principe du C de CSS, qui signifie "Cascade").
Voir : Sélecteurs de voisins généraux


5- Une solution :

Code:

---

1 2 3 4

<div id="target-Jour1" class="collapseomatic_content " style=""> <input type="checkbox" id="Jour1check" name="NUTRITION[]" value="Jour1" /><label for="Jour1check">DONE</label> <span class="collapseomatic arrowright colomat-close colomat-visited" id="Jour1" tabindex="0" title=" Jour 1 "> Jour 1 </span> </div>

---

Code:

---

1 2 3

#Jour1check:checked ~ span#Jour1 { background: #7ac143 !important; }

---