Hab keine Ahnung, wie was ich als Überschrift hätte nehmen sollen
Angelehnt an Erweiterung von Toggle Menü ohne JavaScript für mobile Navigation
Ich möchte über :checked andere Kontainer beeinflussen.
Wenn :checked, dann soll das auf ein label folgende obj (hier div) beeinflusst werden.
wolf hatte mir schon gezeigt, dass es mit nem input und id funktioniert.
Jetzt versuche ich das Ganze ohne id.
<!-- mit id/for -->
<label for="a">click</label>
<input id="a" type="checkbox">
<div>change</div>
<!-- ohne id/for -->
<label>
click
<input id="a" type="checkbox">
<div>change inside</div>
</label>
<div>change outisde</div>
Alles anzeigen
Mit id funktioniert - klar. Aber ohne wäre es schön einfach dynamisch zu erstellen (PHP-seitig zB)
Das ist was ich hab:
label + div, label > div { /*innere und aeussere default yellow*/
background-color: yellow;
}
label > input:checked + div{ /*innere red, wenn :checked*/
background-color: red;
}
label + div input:checked + div{ /*aeussere red, wenn :checked -- funktioniert so nicht =/ */
background-color: red;
}
<label>
click
<input type="checkbox">
<div>change inside</div>
</label>
<div>change outisde</div>
und live test: https://jsfiddle.net/61b65czk/2/
Ich bin mir sicher, dass label + div input:checked + div falsch ist
Was ich als Anweisung brauche ist wohl in etwa:
wenn ein label > input:checked
dann dieses label + div { ... }
Bekommt man das hin, oder gibts da doch Grenzen?