✔ In Abhängigkeit vom inneren Elementstatus äußeres Element ansteuern

[holgenoni]

Hallo liebe Leute,

ich hoffe Ihr könnt mir da mal kurz helfen. Gibt es eine möglichkeit über CSS das äußere Element durch den Status des inneren Elements zu steuern? Irgendwie finde ich nicht genau die richtigen Worte dafür, deshalb hier das Beispiel:

also wenn

li input[type="radio"]:checked

dann soll dem vorherigen li Element

{background: #666;}

gesetzt werden.


Würde mich über jegliche Hilfe freuen.

Grüße
Andy

 

[tombe]

Hier findest du ein Beispiel wo so etwas ähnliches gemacht wird.

In diesem Beispiel wird nach dem Anklicken der Checkbox die Schrift auf Fett gestellt. Das solltest du auf deine Bedürfnisse anpassen können.

 

[holgenoni]

Hallo tombe,

danke für die Antwort. Leider ist das nicht ganz das was ich brauche.

Hier nochmals der html code:

<li>
      <div class="check">
          <input name="value1" type="radio" />
      </div>
      <div class="text">
          <p>Text1</p>
      </div>
</li>
<li>
      <div class="check">
          <input name="value2" type="radio" />
      </div>
      <div class="text">
          <p>Text2</p>
      </div>
</li>

und laut dem Link vorher müsste das css dann ja so aussehen:

input[type="radio"]:checked + li{
    background: #666;
}

Leider funktioniert das nicht. Ich denke es is deshalb, da ich ein übergeordnetes li ansprechen will. Das <div class="text"> könnte ich sicher so verändern.

Grüße
Andy

 

[tombe]

Ok, sorry dann geht es so nicht. Soweit ich weiß kannst du mit CSS nicht von "unten nach oben" arbeiten.

Dann bleibt nur Javascript, wenn das für dich eine Option ist!?

 

[holgenoni]

Ja es ist eine Option. Ich versuche es gerade mit jquery. Bin aber bis jetzt nicht zu einem zufriedenstellenden Ergebniss gekommen.
Ich kann zwar das li mit einer zusätzlichen class erweitern, allerding habe ich dann das problem, das alle li elemente die class bekommen.

Der Code shaut so aus:

$('#radio').click(function(){
      $('li').toggleClass('highlight');
});

 

[tombe]

Dann wirst du jedem <li> eine id zuweisen müssen und die Formatierung nicht mit "class=" sondern mit "style=" machen müssen.

Das kannst du dann mit Javascript einstellen.

 

[holgenoni]

Hi, da muss ich dir widersprechen. Geht auch ohne der extra zuweisung und mit class so wie ich es machen wollte.

Hier der funktionierende code:

<script type="text/javascript">
      {literal}
        $("input[type='radio']").change(function() {
            if(this.checked) {
            $('li').removeClass('highlight');
            $(this).parent().parent().toggleClass('highlight');
            }
        });
    {/literal}
</script>