Entwickler-Ecke
Programmiersprachen (Client) - CSS: Bedingter Style auf Basis eines "entfernten" Elemente
Palladin007 - Do 03.08.17 19:04
Titel: CSS: Bedingter Style auf Basis eines "entfernten" Elemente
'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:
HTML-Dokument
1: 2: 3: 4: 5: 6: 7: 8: 9:
| <div class="container"> <label class="button"> <input type="checkbox"> </label> <div class="liste"> </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:
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:
https://www.w3schools.com/code/tryit.asp?filename=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
Palladin007 - Fr 04.08.17 09: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 - Fr 04.08.17 10:39
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 [
http://caniuse.com/#feat=css-matches-pseudo] 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 - Fr 04.08.17 13: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 - Fr 04.08.17 13: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 - Fr 04.08.17 14: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 - Fr 04.08.17 14:27
Was für eine Animation denn?
Palladin007 - Fr 04.08.17 14:33
Dieses Icon:
http://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:
https://www.w3schools.com/howto/tryit.asp?filename=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 - Fr 04.08.17 14:50
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?
FinnO - Sa 05.08.17 13:59
Labels haben ja glücklicherweise das
for-Attribut.
https://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 - Mo 07.08.17 10: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
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!