Un CSS qui n'est pas modifié - Theme CSS

Bonjour à tous.

Je présente mon script ici : https://jsfiddle.net/dae8cxgh/

Mon theme doit changer le CSS à utiliser. Ca fonctionne parfaitement.
Sauf pour personnaliser la balise BODY. Impossible de faire changer la couleur de fond, géré par (par exemple, le rouge) :

Code:

---

input[id="red"]:checked ~ body {background-color: #ff0000;}

---

Quelque chose m’échappe mais je ne vois pas quoi...

Merci à tous pour votre aide :)

~ permet de relier l'élement en référence avec un autre élément voisin sur sa droite

l'élément body et un élément parent ( donc il est pas "voisin" )

je viens de mettre à jour le code car je viens de réaliser que les boutons, dans mon projet, seront en bas.

En effet, là, plus rien ne marche.

Mais alors, comment faire pour que le système change le css d'éléments parent ou plus "haut" dans le code ?

le css ne permet que le changement sur des enfants ou des voisins de droite.

Cela pourrait peut être changer dans une version future de CSs, mais ça risque d'être long...

le seul moyen actuellement serait d'utiliser du javascript

Bonjour,
on peut en utilisant le sélecteur d'adjacence « élargie » ~ (tilde) cibler des éléments qui ne sont pas forcément successeurs directs, mais successeurs tout court.

Dans ton cas cela pourrait se faire en ajoutant un élément de fond à ta page qui suit tes éléments <input>.

Code:

---

1 2 3 4 5

<input type="radio" id="red" name="color" value="red"> <input type="radio" id="blue" name="color" value="blue"> <input type="radio" id="green" name="color" value="green"> <div id="layer-fond"></div> <!-- la suite du code -->

---

Il suffit de le placer en position:fixed, par exemple, et de lui faire occuper tout l'espace disponible

Code:

---

1 2 3 4 5 6 7 8

#layer-fond { z-index: -1; /* mise en arrière plan*/ position: fixed; top: 0; right: 0; bottom: 0; left: 0; }

---

ensuite tu peux tout à fait le cibler comme tu l'as entrevu, par exemple

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

/* Styles if Red is checked */ #red:checked ~ #layer-fond { background-color: #F00; } #red::checked ~ header { background-image: linear-gradient(to bottom, rgba(200,0,0,0.6) , rgba(100,0,0,1) ); } #red::checked ~ section { background-image: linear-gradient(to left, rgba(200,0,0,0.6) , rgba(100,0,0,1) ); } #red::checked ~ footer { background-image: linear-gradient(to top, rgba(200,0,0,0.6) , rgba(100,0,0,1) ); }

---

Nota : inutile de mettre un sélecteur du type input[id="red"], un simple #red suffit.