CSS Div Container ausblenden (geht nicht)

Gast #4414070
Hallo Forum,
kann mir jemand beantworten, warum mein DEMO 2 nicht funktioniert? (Demo 
1 funktionier).
Sobald ich die Checkbox in einen Div Container, Tabelle oder sonstwas 
packe, funktioniert es nicht mehr. :(
Leider bin ich kein CSS Experte...

Vielen Dank für eure Hilfe!
Frederik
1
<!-- DEMO 1 (geht) -->
2
<input type="checkbox" id="button1">Fenster 1 ausblenden
3
<div id="fenster1">FENSTER 1</div>
4
<style>#button1:checked~#fenster1{display:none;}</style>
5

6
<!-- DEMO 2 (geht nicht) -->
7
<div><input type="checkbox" id="button2">Fenster 2 ausblenden</div>
8
<div id="fenster2">FENSTER 2</div>
9
<style>#button2:checked~#fenster2{display:none;}</style>
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.
Gast
Vielen Dank Daniel, für deine ausführliche und schlüssige Erklärung. Nun 
habe ich das verstanden und werde es mit JS lösen.

Viele Grüße
Frederik

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 10 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.