Modification des propriétés de style de deux éléments html, avec des pseudo-événements

Question

J'ai créé un code CSS, qui modifie les propriétés de style de deux autres éléments html, avec des événements. Lorsqu'une case est cochée, je souhaite changer la couleur d'arrière-plan d'une boîte d'étiquettes et d'une étiquette div. Et quand je décoche la case à cocher, la couleur d'arrière-plan doit être basculée avec la précédente. Le code travaille sur la modification des propriétés CSS de l'étiquette d'étiquette. Mais ne fonctionne pas pour tag div. Voici le CSS:

input[type=checkbox] { 
display:none; 
} 

input[type=checkbox] + label 
{ 
background: #999; 
height: 16px; 
width: 16px; 
display:inline-block; 
padding: 0 0 0 0px; 
} 
input[type=checkbox]:checked + label 
{ 
background: #0080FF; 
height: 16px; 
width: 16px; 
display:inline-block; 
padding: 0 0 0 0px; 
} 
input[type=checkbox]:checked ~ #menu_content 
{ 
    height:100vh; 
     width:25vh; 
     position:fixed; 
     left:0; 
     top:11%; 
     background-color:#41a3d8; 
} 
input[type=checkbox]:not(:checked) ~ #menu_content 
{ 
    height:100vh; 
     width:25vh; 
     position:fixed; 
     left:0; 
     top:11%; 
     background-color:#fff; 
     border-style:solid; 
     border-width:1px 1px 1px 1px; 
} 

Voici le code html:

<div id="header"> 
    <span id="nav_button"> 
     <input type='checkbox' name='thing' id="thing"/> 
     <label for="thing"> 
     </label> 
    </span> 
    <span id="title"> 
     &lt;TITLE&gt; 
    </span> 
</div> 
<div id="menu_content"> 
    <p id="menu_head"> 
     Nav 
    </p> 
    <a href="#" id="menu_links"> 
     Link1 
    </a> 
    <a href="#" id="menu_links"> 
     Link2 
    </a> 
    <a href="#" id="menu_links"> 
     Link3 
    </a> 
</div> 

Je suis en train de le faire, sans utiliser aucun type de scripts

Answer 1

Les ~ sélecteurs ne fonctionne qu'avec il frères et soeurs, donc je recommanderais de faire de la div un frère de la case à cocher comme l'exemple.

input[type=checkbox] { 
 
display:none; 
 
} 
 

 
input[type=checkbox] + label 
 
{ 
 
background: #999; 
 
height: 16px; 
 
width: 16px; 
 
display:inline-block; 
 
padding: 0 0 0 0px; 
 
} 
 
input[type=checkbox]:checked + label 
 
{ 
 
background: #0080FF; 
 
height: 16px; 
 
width: 16px; 
 
display:inline-block; 
 
padding: 0 0 0 0px; 
 
} 
 
input[type=checkbox]:checked ~ #menu_content 
 
{ 
 
    height:100vh; 
 
     width:25vh; 
 
     position:fixed; 
 
     left:0; 
 
     top:11%; 
 
     background-color:#41a3d8; 
 
} 
 
input[type=checkbox]:not(:checked) ~ #menu_content 
 
{ 
 
    height:100vh; 
 
     width:25vh; 
 
     position:fixed; 
 
     left:0; 
 
     top:11%; 
 
     background-color:#fff; 
 
     border-style:solid; 
 
     border-width:1px 1px 1px 1px; 
 
}

<div id="header"> 
 
    <span id="nav_button"> 
 
     <input type='checkbox' name='thing' id="thing"/> 
 
     <label for="thing"> 
 
     </label> 
 
     <div id="menu_content"> 
 
      <p id="menu_head"> 
 
       Nav 
 
      </p> 
 
      <a href="#" id="menu_links"> 
 
       Link1 
 
      </a> 
 
      <a href="#" id="menu_links"> 
 
       Link2 
 
      </a> 
 
      <a href="#" id="menu_links"> 
 
       Link3 
 
      </a> 
 
     </div> 
 
    </span> 
 
    <span id="title"> 
 
     &lt;TITLE&gt; 
 
    </span> 
 
</div>

Une autre option serait d'utiliser Js .. ou pur css sera en utilisant les sélecteurs CSS dans l'URL en utilisant: cible() https://stackoverflow.com/a/9442590/2894798 (ont pas essayé ...)

Answer 2

Comme vous pouvez le constater, les deux premières règles CSS fonctionnent comme vous le souhaitez, mais pas les autres. La raison en est que label est un frère à input et suit directement inputinput, à laquelle correspond le + dans le sélecteur CSS.

Mais #menu_content n'est pas un frère ou une soeur (comme l'exige ~), c'est deux niveaux plus élevés.

Vous ne serez pas en mesure de le faire sans un script, il n'y a pas de méthodes CSS pour sélectionner les ancêtres.

input[type=checkbox]+label { 
 
    background: #999; 
 
    height: 16px; 
 
    width: 16px; 
 
    display: inline-block; 
 
    padding: 0 0 0 0px; 
 
} 
 

 
input[type=checkbox]:checked+label { 
 
    background: #0080FF; 
 
    height: 16px; 
 
    width: 16px; 
 
    display: inline-block; 
 
    padding: 0 0 0 0px; 
 
} 
 

 
input[type=checkbox]:checked~#menu_content { 
 
    height: 100vh; 
 
    width: 25vh; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 11%; 
 
    background-color: #41a3d8; 
 
} 
 

 
input[type=checkbox]:not(:checked)~#menu_content { 
 
    height: 100vh; 
 
    width: 25vh; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 11%; 
 
    background-color: #fff; 
 
    border-style: solid; 
 
    border-width: 1px 1px 1px 1px; 
 
}

<div id="header"> 
 
    <span id="nav_button"> 
 
     <input type='checkbox' name='thing' id="thing"/> 
 
     <label for="thing"> 
 
     </label> 
 
    </span> 
 
    <span id="title"> 
 
     &lt;TITLE&gt; 
 
    </span> 
 
</div> 
 
<div id="menu_content"> 
 
    <p id="menu_head"> 
 
    Nav 
 
    </p> 
 
    <a href="#" id="menu_links"> 
 
     Link1 
 
    </a> 
 
    <a href="#" id="menu_links"> 
 
     Link2 
 
    </a> 
 
    <a href="#" id="menu_links"> 
 
     Link3 
 
    </a> 
 
</div>