Comment définir une valeur de propriété pour l'état actif d'un autre élément en CSS ?

Question

Je développe actuellement un commutateur sans JavaScript. Un problème que j'ai est que je ne sais pas comment définir une propriété d'un élément alors qu'un autre élément est dans l'état :actif. J'ai essayé quelques choses sans succès. J'ai un lien CodePen ici. Voici également du code :

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  overflow: hidden;
  filter: brightness(100%);
}

.wall-switch {
  background-color: #ebebeb;
  width: 300px;
  height: 500px;
  box-shadow: inset -10px -10px 22px 0px rgba(255, 255, 255, 1), inset 10px 10px 22px 0px rgba(0, 0, 0, 0.30);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 25px;
  border-radius: 4px;
}

.screw {
  padding: 7.5px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 2.5px 2.5px 10px 0px rgba(255, 255, 255, 1), inset -2.5px -2.5px 10px 0px rgba(0, 0, 0, 0.30), 0px 0px 2px 1px rgba(0, 0, 0, 0.40);
}

.icon {
  transition-duration: 10s;
  transition-timing-function: linear;
}

.icon:active {
  transform: rotate(-3600deg);
}

.padding {
  padding: 55px;
}

.switch {
  width: 105px;
  height: 200px;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.40), inset 0px 95px 20px 0px #ebebeb, inset 0px -95px 20px 0px rgba(0, 0, 0, 0.20);
  border-radius: 2.5px;
}

.switch:active {
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.40), inset 0px -95px 20px 0px #6b6b6b, inset 0px 95px 20px 0px rgba(0, 0, 0, 0.20);
}

.switch:active .wall-switch {
  background-color: #6b6b6b;
}

<div class="wall-switch">
  <div class="screw">
    <svg class="icon  icon--plus" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" fill="rgba(0, 0, 0, 0.45)">
        <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" stroke="url(#grad1)" />
    </svg>
  </div>
  <div class="padding"></div>
  <div class="switch"></div>
  <div class="padding"></div>
  <div class="screw">
    <svg class="icon  icon--plus" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" fill="rgba(0, 0, 0, 0.45)">
        <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" stroke="url(#grad1)" />
    </svg>
  </div>
</div>

Quelqu'un connaît la solution ? Je travaille là-dessus depuis un moment.

Answer 1

J'ai vérifié et il s'avère qu'il s'agit d'une nouvelle fonctionnalité en CSS. Le caractère > est utilisé pour la promotion (de l'élément enfant à l'élément parent, ce qui est nouveau).

.wall-switch:has(> .switch:active){
  background-color: #6b6b6b;
}

Référence : Existe-t-il un sélecteur de parent CSS ?