CSS Checkbox-Hack für verschachtelte DIVs in Wordpress Seite

[tombe]

Hallo Forum,

ich habe (leider) kaum noch mit HTML/CSS usw. zu tun, muss nun aber eine mit Wordpress erstellte Seite um eine bestimmte Funktion erweitern.

Oben auf der Seite sind verschiedene Menüpunkte aufgeführt, im Beispiel:

| Minimal | Maximal |

Weiter unten auf der Seite stehen dann unter der jeweiligen Überschrift verschiedene Produkte. Mit Hilfe des Checkbox-Hacks soll es nun möglich sein, dass bestimmte Bereiche ausgeblendet werden (im Beispiel wird stattdessen die Hintergrundfarbe geändert).

Im Prinzp bekomme ich das hin, da aber die Wordpress Seite aus unzähligen DIVs besteht, schaffe ich es nicht die jeweilige Klasse anzusprechen.

Dieser Code funktioniert:

<div>
<input type="checkbox" id="mini" name="mini" class="check"/><label for="mini">Minimal</label> -
<input type="checkbox" id="maxi" name="maxi" class="check"/><label for="maxi">Maximal</label>
<hr/>

  <br/>

  <div class="mini">Block für Minimal</div>

  <br/>
  <div class="maxi">Block für Maximal</div>
</div>

Wenn ich nun aber weitere DIV Blöcke erstelle klappt nichts mehr, zum Beispiel so:

<div>
<input type="checkbox" id="mini" name="mini" class="check"/><label for="mini">Minimal</label> -
<input type="checkbox" id="maxi" name="maxi" class="check"/><label for="maxi">Maximal</label>
<hr/>
</div>

<div>
  <div><b>Minimal</b>
  <br/>
  <div class="mini">Block für Minimal</div>
  </div>
  <br/>
  <div><b>Maximal</b>
  <br/>
  <div class="maxi">Block für Maximal</div>
  </div>
</div>

Des CSS Code dafür lautet:

.check:checked + label { color: #FFA500; }

.mini, .maxi { padding: 5px; border: 1px solid gray;}

input[name="mini"]:not(:checked) ~ .mini {background-color: #D3D3D3}
input[name="maxi"]:not(:checked) ~ .maxi {background-color: #D3D3D3}

Leider kann ich die entsprechende Seite hier nicht verlinken, da sich diese erst in der Entwurfsphase befindet.

Ich wäre euch für alles was hilft sher, sehr dankbar !!!

 

[Sempervivum]

Dazu musst Du die Adressierung von .mini und .maxi nur ein wenig erweitern. Prüfe, ob dir diese Beschreibungen bei Selfhtml weiter helfen:
CSS/Selektoren/Kombinator – SELFHTML-Wiki

 

[tombe]

Hallo und Danke für deine Antwort.

Ich habe mir schon einige Seiten angeschaut wo es um Kombinatoren aller Art ging, so auch die von dir angegebene Seite.

Bislang hatte aber wohl alles was ich versucht habe zumindest einen Fehler. Kannst du mir vielleicht einen Tipp geben mit welcher Kombination ich es versuchen soll.

Danke und Gruß Thomas

 

[Sempervivum]

Ich hätte genauer hinschauen sollen: Mit deinem letzten HTML ist die Aufgabe mit CSS nicht lösbar, weil man kein Elternelement adressieren kann. Du musst das HTML so ändern, dass Du mit Geschwister- und Kind- bzw. Nachfahrenselektoren auskommst, z. B. so:

    <div>
        <label for="mini">Minimal</label> -
        <label for="maxi">Maximal</label>
        <hr />
    </div>
    <input type="checkbox" id="mini" name="mini" class="check" />
    <input type="checkbox" id="maxi" name="maxi" class="check" />
    <div>
        <div><b>Minimal</b>
            <br />
            <div class="mini">Block für Minimal</div>
        </div>
        <br />
        <div><b>Maximal</b>
            <br />
            <div class="maxi">Block für Maximal</div>
        </div>
    </div>
    <style>
        .check:checked+label {
            color: #FFA500;
        }

        .mini,
        .maxi {
            padding: 5px;
            border: 1px solid gray;
        }

        input[name="mini"]:not(:checked)~div>div>.mini {
            background-color: #D3D3D3
        }

        input[name="maxi"]:not(:checked)~div>div>.maxi {
            background-color: #D3D3D3
        }
    </style>

Meistens ist es beim Checkboxtrick so, dass man die Checkbox unsichtbar macht, so dass es vom Layout her egal ist, wo sie platziert ist. Weiß nicht, ob das bei dir auch so ist?

Edit: An die Umfärbung der Labels habe ich jetzt nicht gedacht. Aber das kannst Du sicher selbst lösen.

 

[tombe]

Wahnsinn, mit einer leicht abgewandelten Version bin ich einer Lösung zumindest schonmal einen riesen Schritt näher gekommen.

Wenn ich jetzt die Seite noch ein bisschen umgestalten kann, sollte ich damit klar kommen.

Vielen, vielen Dank!!