css intercettare un elemento

HTML

Codice:

---

<div class="col-lg-12 mt-4">
                <div class="row justify-content-between">

                    <div class="col-lg-7 col-sm-6 col-6 mt-3">
                        <h5 for="" class="">Soggetti responsabili</h5>
                    </div>

                    <div class="col-sm-3 mt-3 text-right pluto">
                        <button type="button" class="btn btn-toggle btn-secondary" data-toggle="button" aria-pressed="false" autocomplete="off">
                        <div class="handle"></div>
                      </button>
                    </div>

                    <div class="col-lg-1 col-sm-2 col-3 text-center mt-3 pippo">
                        <a href="javascript:;;" class="bottone-inserisci" (click)="addSoggettoResponsabile();"><i
                class="fas fa-plus"></i></a>
                    </div>
                </div>
            </div>

---

CSS

Codice:

---

.pluto>.btn-toggle.btn-secondary.active~.pippo {
    color: red!important;
    background-color: pink!important;
}

---

scusate ho un problema avrei bisogno di intercettare il div "pippo" quando l'elemento "button" dentro "pluto" ha come classe ".btn-toggle.btn-secondary.active". La classe active viene inserita al click sul bottone. è possibile farlo?

Salve,
sì, è possibile aggiungere classi css ad un elemnto usando javascript.

Esempio:

Codice HTML:

---

<style>
.mystyle {
  width: 50%;
  padding: 25px;
  background-color: #ccc;
  color: white;
  font-size: 25px;
}
</style>

<button id="myDIV" onclick="myFunction()">test</button>

<script>
function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.add("mystyle");
}
</script>

---

Cordiali saluti.