CSS: Bedingter Style auf Basis eines "entfernten" Elemente

Palladin007 · Verfasst: Do 03.08.17 18:04

'n Abend,

ich hab ein kleines bzw. großes Problem mit den CSS-Selektoren, da ich eine Bedingung auf Basis eines anderen (nicht child) Elementes brauche.

So der ungefähre Aufbau:

markieren

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:

<div class="container">
    <label class="button">
        <input type="checkbox">
        <!-- Weitere Inhalte -->
    </label>
    <div class="liste">
        <!-- Weitere Inhalte -->
    </div>
</div>

Das label.button befindet sich mit Hilfe von position:absolut an einer bestimmten Position.
Das div.liste befindet sich ebenfalls mit Hilfe von position:absolut an einer anderen Position.

Wenn die CheckBox nun gesetzt wird, erst dann soll das div.liste angezeigt werden.
Der Knackpunkt an der Sache: Ohne JavaScript!!

Ich hab so einiges gelesen, wie z.B. die Pseudoklassen :has oder :matches
So stelle ich mir das ungefähr vor:

markieren

Cascading Style Sheet

1:
2:
3:
4:
5:
6:

.container > div.liste {
    display: none;
}
.container:matches(> label.button > input[type=checkbox]:checked) > div.liste {
    display: block;
}

Das :matches prüft dann also darauf, dass in .container ein label.button liegt, das eine CheckBox enthält, die checked ist.
Und nur dann, wenn dieser Selector passt, erst dann passt auch das :matches und das div:liste wird angezeigt.

Hier das Ganze mal zum Testen, wie ich mir das vorstelle:
www.w3schools.com/co...ilename=FI8249VYYBQX

So wie ich das :matches verstanden habe, ist das so auch richtig, allerdings bekomme ich weder Firefox, noch Chrome oder Edge dazu, die Regel zu akzeptieren.

Hat jemand einen Tipp, wie ich das erreichen kann?
Oder weiß jemand, was ich bei :matches falsch gemacht habe?

Beste Grüße

FinnO · Verfasst: Do 03.08.17 18:40

Moin,

wenn du dein Markup ein bisschen umbauen kannst, geht das ganze z.B. so, also mit dem Sibling-Selector (~)

Snippet

markieren

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:

<!DOCTYPE html>
<html>
  <head>
    <style>

      .button {
          position: absolute;
          top: 0;
          right: 0;
      }

      .liste {
          display: none;
      }

      input:checked ~ .liste {
          display: block;
      }
    </style>
  </head>
  <body>

    <div class="container">
      <input class="button" type="checkbox" />

        <div class="liste">
            <ul>
                <li>Eintrag 1</li>
                <li>Eintrag 2</li>
                <li>Eintrag 3</li>
            </ul>
        </div>
    </div>

  </body>
</html>

Gruß
Finn

Palladin007 · Verfasst: Fr 04.08.17 08:23

Hi Finn,

leider kann ich die Änderung, die Du beschrieben hast, nicht umsetzen.
Ich brauch das Laben drum herum, da ich das input ausblenden und über ein anderes Element einen eigenen animierten Button einbauen will.
Das habe ich aber nur ans Laufen bekommen, nachdem ich ein label um input und icon gesetzt habe.
Wenn ich das nicht mache, scheint die CheckBox nur zu reagieren, wenn ich sie auch einblende.

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Palladin007 hat folgendes geschrieben :

Oder weiß jemand, was ich bei :matches falsch gemacht habe?

Das ist einigermaßen leicht: Du hast nicht beachtet, dass :matches eine ziemlich neue Pseudoklasse ist, die außer im Safari noch nicht viel Zuspruch findet. Außerdem hat sie einen noch recht frischen Namenswechsel hinter sich: In Gecko heißt sie derzeit noch :-moz-any, in WebKit/Blink :-webkit-any.

Palladin007 · Verfasst: Fr 04.08.17 12:40

Naja - ich brauch diese Funktion trotzdem und am Besten in Firefox, Chrome und Edge

Oder hast Du eine andere Idee, wie ich das Ziel erreichen kann?

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Du kannst einen Style in Firefox, Chrome und Edge definieren, indem du die von Firefox, Chrome und Edge unterstützten Deklarationen verwendest.

(Warnhinweis: Edge kann das überhaupt nicht.)

Palladin007 · Verfasst: Fr 04.08.17 13:23

Zitat:

Warnhinweis: Edge kann das überhaupt nicht.

Ok, das ist doof ...
Merkwürdig ist aber, dass VS mir die Pseudoklasse via Intellisense anbietet O.o

Hast Du eine Idee, wie man das irgendwie anders erreichen kann?
Ich möchte den Button drehen, wenn er auf "offen" steht.

Wenn das tatsächlich nicht gehen sollte, dann muss ich die Animation wohl weg lassen.

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Was für eine Animation denn?

Palladin007 · Verfasst: Fr 04.08.17 13:33

Dieses Icon:
fontawesome.io/icon/bars/
Das dreht sich um 90°

Das ist jetzt nichts weltbewegendes und auch nicht kriegsentscheidend, daher werfe ich es lieber raus, bevor ich JavaScript einbaue

Das habe ich über das hier beschriebene Verfahren realisiert bekommen:
www.w3schools.com/ho...me=tryhow_css_switch

Ich lege eine CheckBox neben das Icon-Element in ein Label.
Das Label erlaubt, dass jeder Click irgendwo auf mein Icon auch die ausgeblendete CheckBox "erreicht".
Dieser Umstand macht es mir aber unmöglich, per Selector bei der CheckBox auf Selected zu prüfen.

Hilft es, wenn ich ein Snippet baue, was das verdeutlicht?

hydemarie · Beiträge: 481 Erhaltene Danke: 51

Ich entscheide eigentlich ganz gerne keine Kriege.

Palladin007 hat folgendes geschrieben :

Dieser Umstand macht es mir aber unmöglich, per Selector bei der CheckBox auf Selected zu prüfen.

Lassen wir den Edge erst mal beiseite: Geht's denn mit any?

Palladin007 · Verfasst: Fr 04.08.17 14:15

Zitat:

Lassen wir den Edge erst mal beiseite: Geht's denn mit any?

Ich habs mit -moz-any probiert, weil any scheint er nicht zu kennen.
Damit geht's aber auch nicht oder ich nutze es falsch:

www.w3schools.com/co...ilename=FI914KO5QLN3

Palladin007 · Verfasst: Fr 04.08.17 14:25

Ich hab in's Snipped mal die Animation eingebaut, damit ungefähr klar wird, wie ich mir das vorstelle:

www.w3schools.com/co...ilename=FI91MO71TX7D

Wenn man auf das 'A' drückt, soll es sich drehen, rot werden und links unten soll die Liste angezeigt werden.

FinnO · Verfasst: Sa 05.08.17 12:59

Labels haben ja glücklicherweise das for-Attribut.

jsfiddle.net/vbztbht2/1/

PS: du solltest deinen CSS-Code nicht so überspezifisch schreiben. Das macht ihn erstens schwerer lesbar und zweitens schwerer änderbar. Lieber ein paar Klassen mehr benutzen, statt diese langen Kontextketten (z.B. .container > label.button input:checked + i::before). Damit koppelst du dein Markup und dein Styling extrem aneinander. Stattdessen tut's auch eine .animated-Klasse oder ähnliches.

Palladin007 · Verfasst: Mo 07.08.17 09:06

Das for-Attribute - damit klappts, danke

Zitat:

du solltest deinen CSS-Code nicht so überspezifisch schreiben. Das macht ihn erstens schwerer lesbar und zweitens schwerer änderbar. Lieber ein paar Klassen mehr benutzen, statt diese langen Kontextketten (z.B. .container > label.button input:checked + i::before). Damit koppelst du dein Markup und dein Styling extrem aneinander. Stattdessen tut's auch eine .animated-Klasse oder ähnliches.

Man merkt, dass ich eigentlich nicht aus der Web-Ecke komme, oder?

Das von dir prophezeite Problem hab ich aber schon jetzt, weil ich das Markup so umbauen muss, dass es mit dem for-Attribute passt

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme