CSS Frühere Geschwister-Selektoren und wie man sie fälscht

Wenn Sie jemals geschwisterliche CSS-Selektoren verwendet haben, wissen Sie, dass es nur zwei gibt. Der + Geschwisterkombinator wählt die erste Übereinstimmung aus, die unmittelbar danach erfolgt, und der ~ nachfolgende Geschwisterkombinator stimmt mit allen nachfolgenden Übereinstimmungen überein.
Es gibt jedoch keine Möglichkeit, das Vorhergehende auszuwählen. Entweder Elternselektoren oder frühere Geschwisterselektoren sind einfach keine Sache.

Ich weiß, dass du es willst, du weißt, dass ich es will, aber die harte Wahrheit ist, dass sie nicht existieren (und wahrscheinlich niemals existieren werden). Es gibt eine Million Beiträge über die Gründe. Es gibt sogar Vorschläge zur Umsetzung. Wir stecken jedoch in der unidirektionalen Verarbeitung von CSS-Regeln fest, die uns höchstwahrscheinlich vor unserem „Mangel an Fachwissen“ schützen, das uns in Reflows und sogar Endlosschleifen stecken lässt.

Glücklicherweise können wir es, wie bei den meisten CSS-Einschränkungen, vortäuschen.

Das erste, was zu überlegen ist, warum wir möchten, dass frühere Geschwister anfangen.
Zwei Fälle kommen in den Sinn:

  1. Wir müssen alle Geschwister eines bestimmten Elements auswählen, und der nachfolgende Geschwisterkombinator wählt nur die folgenden aus.
  2. Wir müssen nur Geschwister auswählen, die vorher gekommen sind

1. Auswahl aller Geschwister

Manchmal müssen wir sowohl vorherige als auch nächste Geschwister auswählen. Dazu können wir das übergeordnete Element auswählen und einige Tricks anwenden.

Um beispielsweise alle Bereiche in der folgenden Struktur auszuwählen, wenn Sie einen der Bereiche mit der Maus bewegen, können Sie einfach die untergeordnete Auswahl für den übergeordneten Bereich verwenden. Wir stellen sicher, dass die Zeigerereignisse des übergeordneten Elements deaktiviert und für die untergeordneten Elemente zurückgesetzt werden. Was auch immer wir tun wollen, es wird nur ausgelöst, wenn wir das Kind und nicht den Elternteil selbst betreten.

Wenn Sie alle Geschwister mit Ausnahme des Schwebeflugs auswählen müssen, können Sie die vorherige Technik mit der Option: nicht kombinieren, um sie auszuschließen.

Ein typischer Anwendungsfall hierfür sind Menüs:

Mit dem obigen Code wird die Deckkraft aller

  • -Elemente bis auf das schwebende Element verringert.

    Darüber hinaus können Sie Filter wie Typ- und n-te Selektoren verwenden, um die Geschwister, auf die Sie sich auswirken möchten, genauer zu bestimmen.

    Mit etwas Styling sollte es so funktionieren:

    Bitte beachten Sie: Wenn Sie die Zeigerereignisse ausführen wollen: Keine Annäherung, denken Sie daran, dass dies zu Problemen beim Stapeln führen kann (möglicherweise können Sie Elemente auswählen, die in der Stapelreihenfolge "unten" liegen). Es wird auch in IE10 und darunter nicht funktionieren, abgesehen von der Annahme, dass Sie die Zeigerereignisse für etwas anderes benötigen. Seien Sie daher besonders vorsichtig, wenn Sie es verwenden.

    2. Auswählen, was vorher kam

    In diesem Anwendungsfall können wir die Reihenfolge im HTML-Code umkehren, dann in CSS sortieren und den nachfolgenden Kombinator für Geschwister oder den + nebenstehenden Selektor für Geschwister verwenden. Auf diese Weise werden wir die nächsten Geschwister auswählen, aber es sieht so aus, als würden wir die vorherigen auswählen.

    Hierfür gibt es mehrere Möglichkeiten. Das einfachste und wahrscheinlich älteste ist die Änderung der Schreibrichtung unseres Containers:

    Wenn Ihre Elemente tatsächlichen Text anzeigen müssen, können Sie diesen jederzeit umkehren:

    Aber das kann in vielerlei Hinsicht außer Kontrolle geraten. Glücklicherweise macht es die moderne CSS-Toolbox viel einfacher und sicherer. Wir können einfach Flexbox für den Container verwenden und die Reihenfolge mit flex-direction umkehren: row-reverse:

    Das Beste am Flexbox-Ansatz ist, dass wir uns nicht mit der Schreibrichtung anlegen. Wir müssen die Kinder nicht zurücksetzen, und alles ist viel vorhersehbarer.

    Verwenden Sie „vorherige Geschwister“, um ein Bewertungssystem mit nur CSS-Sternen zu erstellen

    Semantisch kann ein Bewertungssystem als eine einfache Liste von Optionsfeldern mit den entsprechenden Bezeichnungen angesehen werden. Das ist praktisch, da wir den aktivierten Pseudo-Selektor verwenden können, um die Geschwister zu ändern.

    Fangen wir also von dort an:

    Wie bereits erwähnt, sind die Elemente in umgekehrter Reihenfolge angeordnet, um einen "Vorgänger" -Selektor zu ermöglichen. Beachten Sie, dass wir das Unicode-Zeichen „weißer Stern“ (U + 2606) verwenden, um die leeren Sterne darzustellen.

    Zeigen wir sie nebeneinander in der richtigen (umgekehrten) Reihenfolge an:

    Verstecken Sie nun die Optionsfelder selbst, das will niemand sehen:

    Und wende etwas Styling auf die Sternzeichen an:

    Die einzig wirklich wichtige Linie ist die Position: relativ. Damit können wir ein gefülltes Stern-Pseudoelement (U + 2605) absolut darüber positionieren, das zunächst ausgeblendet wird.

    Wenn wir über einem Stern schweben, sollte das gefüllte Sternpseudoelement für ihn und alle vorherigen Geschwister sichtbar werden.

    Dasselbe gilt für die ausgewählte Bewertung, indem alle Bezeichnungen vor dem aktivierten Optionsfeld abgeglichen werden:

    Denken Sie daran, dass die Verwendung des! Important-Flags genau das Gegenteil einer guten Praxis ist. Ich mache dies hier, da es keinen anderen Weg gibt, um die im nächsten Abschnitt diskutierte zusätzliche Funktionalität ohne sie zu erreichen.

    Zu guter Letzt müssen wir uns die aktuelle Bewertung merken, nur für den Fall, dass der Benutzer sie ändern möchte. Wenn sie zum Beispiel fünf Sterne ausgewählt haben und aus irgendeinem Grund in vier ändern möchten, sollten wir die Sterne 1 bis 4 als gefüllt und den fünften als halbtransparent anzeigen, wenn Sie den Mauszeiger über den vierten halten.

    Dies kann erreicht werden, indem die Deckkraft der vorherigen Geschwister der überprüften Eingabe geändert wird, wenn Sie den Mauszeiger über den Container halten:

    Deshalb brauchten wir auch die Deckkraft: 1! Wichtig in der anfänglichen Schwebedeklaration. Andernfalls hätte diese letzte Regel den Spezifitätswettbewerb gewonnen und auf alles eine halbtransparente Füllung angewendet.

    Und da haben wir es, ein browserübergreifendes, voll funktionsfähiges Sternebewertungssystem, das ausschließlich auf CSS basiert und Selektoren für "frühere Geschwister" verwendet.

    Wie Sie sehen können, bedeutet "es ist unmöglich" nicht, dass Sie es nicht versuchen sollten. Beim Programmieren geht es darum, die Grenzen zu überschreiten. Wenn Sie also gegen die Wand stoßen, drücken Sie etwas stärker. Oder ich denke, es könnte eine bessere Analogie sein, wenn Sie sich zurechtfinden? ... Wie auch immer, Sie wissen, was ich meine. Hacken Sie weiter!

    Ein Hinweis zur Barrierefreiheit

    Das vorherige Snippet ist eine Vereinfachung, um es leicht verständlich zu machen. Aufgrund der vielen Einschränkungen bei der Barrierefreiheit würde ich die Verwendung in der Produktion nicht empfehlen.

    Um das Snippet ein wenig zugänglicher zu machen, sollten Sie als Erstes die Optionsfelder mit so gut wie jeder anderen Technik als der Anzeige ausblenden: Keine, um sie fokussierbar zu machen. Wir sollten auch einen Fokusring über den Pseudo-Selektor: focus-within auf das gesamte Sternen-Snippet setzen, wenn ein Element im Inneren fokussiert ist.

    Die identischen „labels“ -Labels sind für Bildschirmleser nicht sinnvoll. Daher besteht der beste Ansatz darin, ein im Label mit dem Text „n Sterne“ zu haben, das für sehende Benutzer nicht sichtbar ist.

    Auch die umgekehrte HTML-Quelle + Anzeige: Zeilenumkehrung führt zu einer ungünstigen Bewertung der Tastatur, da sie nicht rückgängig gemacht wird. Die Zugänglichkeit von Flexboxen und Tastaturen ist ein ziemlich chaotisches Thema, aber der Lösung am nächsten kommt das Hinzufügen von aria-flowtotag zu jedem Element, wodurch das Problem zumindest für einige Bildschirmlese- und Browserkombinationen behoben wird.

    Für ein zugänglicheres Snippet (mit einer alternativen Technik, bei der die nächsten Geschwister so modifiziert werden, dass sie leer aussehen, anstatt zu versuchen, frühere Geschwister zu bewerten), überprüfen Sie das von Patrick Cole, wie wir in den Antworten unten beschrieben haben.