Autor Beitrag
Palladin007
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 1107
Erhaltene Danke: 133

Windows 10 x64 Home Premium
C# (VS 2015 Enterprise)
BeitragVerfasst: 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:

ausblenden 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:

ausblenden 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
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1317
Erhaltene Danke: 113

Mac OSX
TypeScript, ES6 (Webstorm 2017.1), C# (Visual Studio 2017 Enterprise), C++ (CLion 2017.1), Go (Gogland EAP), Java 8 (IDEA), Clojure
BeitragVerfasst: 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

ausblenden volle Höhe 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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 1107
Erhaltene Danke: 133

Windows 10 x64 Home Premium
C# (VS 2015 Enterprise)
BeitragVerfasst: 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
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 375
Erhaltene Danke: 48



BeitragVerfasst: Fr 04.08.17 09:39 
user profile iconPalladin007 hat folgendes geschrieben Zum zitierten Posting springen:
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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 1107
Erhaltene Danke: 133

Windows 10 x64 Home Premium
C# (VS 2015 Enterprise)
BeitragVerfasst: Fr 04.08.17 12:40 
Naja - ich brauch diese Funktion trotzdem und am Besten in Firefox, Chrome und Edge :D

Oder hast Du eine andere Idee, wie ich das Ziel erreichen kann?
hydemarie
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 375
Erhaltene Danke: 48



BeitragVerfasst: Fr 04.08.17 12:44 
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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 1107
Erhaltene Danke: 133

Windows 10 x64 Home Premium
C# (VS 2015 Enterprise)
BeitragVerfasst: 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
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 375
Erhaltene Danke: 48



BeitragVerfasst: Fr 04.08.17 13:27 
Was für eine Animation denn?
Palladin007 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 1107
Erhaltene Danke: 133

Windows 10 x64 Home Premium
C# (VS 2015 Enterprise)
BeitragVerfasst: 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 :D

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
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 375
Erhaltene Danke: 48



BeitragVerfasst: Fr 04.08.17 13:50 
Ich entscheide eigentlich ganz gerne keine Kriege.

user profile iconPalladin007 hat folgendes geschrieben Zum zitierten Posting springen:
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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 1107
Erhaltene Danke: 133

Windows 10 x64 Home Premium
C# (VS 2015 Enterprise)
BeitragVerfasst: 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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 1107
Erhaltene Danke: 133

Windows 10 x64 Home Premium
C# (VS 2015 Enterprise)
BeitragVerfasst: 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
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1317
Erhaltene Danke: 113

Mac OSX
TypeScript, ES6 (Webstorm 2017.1), C# (Visual Studio 2017 Enterprise), C++ (CLion 2017.1), Go (Gogland EAP), Java 8 (IDEA), Clojure
BeitragVerfasst: 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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 1107
Erhaltene Danke: 133

Windows 10 x64 Home Premium
C# (VS 2015 Enterprise)
BeitragVerfasst: 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? :D
Das von dir prophezeite Problem hab ich aber schon jetzt, weil ich das Markup so umbauen muss, dass es mit dem for-Attribute passt