Discussion :

[Rone22170]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et dans le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Invité]

Bonjour,

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

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

.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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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