HTML hat eine Baumstruktur, Elemete können ineinander verschachtelt
werden. Wenn du das Input element in das Div packst ist es ein
Unterelement dieses Divs. Fenster 2 und die checkbox sind dann auf
unterschiedlichen Ebenen:
1 | Ebene
|
2 | 0 <- Element nummer in Ebene
|
3 | 0 root
|
4 | |
|
5 | ------------------
|
6 | 0 1 2 <- Element nummer in Ebene
|
7 | 1 div div style
|
8 | 0 <- Element nummer in Ebene
|
9 | 2 input
|
CSS wurde Bewust so designt, dass es selektoren für Nachfolgende
Elemente der selben Ebene, selektoren for das momentane Element, und
Selektoren für Elemente in Unterebenen gibt, aber keine für
Davorliegende Elemente oder Darüberliegende Ebenen.
Dies ist Sinnvoll, weil es:
1) Das Durchlaufen und Anwenden der Eigenschaften auf Elemente für den
Browser vereinfacht
2) Inkonsistentes verhalten vermeidet. Man stelle sich nur mal vor es
wäre anders, und man würde z.B. mit css in beide Richtungen eine
Nummerierung erhöhen.
...
Soetwas wie in deinem zweiten Beispiel ist also Prinzipiell in css nicht
möglich. Der einzig sinvolle theoretische usecase den ich bisher gehabt
hätte sind Checkboxen in Labeln die noch etwas Einblenden sollen (weil
man dann auf das for und id attribut verzichten könnte). Man kann
soetwas jedoch mit JavaScript lösen.