Ausgewählte Elemente in einem Grid-Container bedingt formatieren

Kalender, Einkaufswagen, Galerien, Datei-Explorer und Online-Bibliotheken sind einige Situationen, in denen auswählbare Elemente in Rastern (dh quadratischen Gittern) angezeigt werden. Weißt du, sogar diese Sicherheitskontrollen, die dich auffordern, alle Bilder mit Zebrastreifen oder was auch immer auszuwählen.

Ich habe eine nette Möglichkeit gefunden, auswählbare Optionen in einem Raster anzuzeigen. Nein, das reCAPTCHA wird nicht neu erstellt, sondern es können einfach mehrere Elemente ausgewählt werden. Und wenn zwei oder mehr benachbarte Elemente ausgewählt werden, können wir clever verwenden :nth-of-type Kombinatoren, Pseudoelemente und die :checked Pseudo-Klasse, um sie so zu gestalten, dass sie gruppiert aussehen.

Die ganze Idee von Kombinatoren und Pseudos, um die abgerundeten Kontrollkästchen zu erhalten, kam von a vorheriger Artikel, den ich geschrieben habe. Es war ein einfaches einspaltiges Design:

Dieses Mal wird der Rundungseffekt jedoch auf Elemente entlang der vertikalen und horizontalen Achse eines Rasters angewendet. Dazu müssen Sie meinen letzten Artikel über Checkbox-Styling nicht gelesen haben, da ich hier alles behandeln werde, was Sie wissen müssen. Aber wenn Sie an einer abgespeckten Version dessen interessiert sind, was wir in diesem Artikel tun, dann ist es einen Blick wert.

Bevor wir anfangen…

Es ist hilfreich, wenn Sie einige Dinge beachten. Der Einfachheit halber verwende ich in meiner Demo beispielsweise statisches HTML und CSS. Abhängig von Ihrer Anwendung müssen Sie möglicherweise das Raster und die darin enthaltenen Elemente dynamisch generieren. Ich lasse praktische Überprüfungen der Zugänglichkeit aus, um mich auf die Wirkung zu konzentrieren, aber Sie sollten so etwas in einer Produktionsumgebung auf jeden Fall in Betracht ziehen.

Außerdem verwende ich CSS Grid für das Layout. Ich würde das gleiche empfehlen, aber natürlich ist es nur eine persönliche Präferenz und Ihre Laufleistung kann variieren. Für mich erlaubt mir die Verwendung von Grid, Geschwisterselektoren zu verwenden, um auf ein Element zu zielen ::before und ::after Pseudos.

Unabhängig davon, welchen Layoutstandard Sie in Ihrer Anwendung verwenden möchten, stellen Sie daher sicher, dass die Pseudos immer noch in CSS angesprochen werden können, und stellen Sie sicher, dass das Layout über verschiedene Browser und Bildschirme hinweg intakt bleibt.

Fangen wir jetzt an

Wie Sie vielleicht in der vorherigen Demo bemerkt haben, ändert das Aktivieren und Deaktivieren eines Kontrollkästchenelements das Design der Kästchen, abhängig vom Auswahlstatus der anderen Kontrollkästchen darum herum. Dies ist möglich, weil ich jede Box mit den Pseudo-Elementen ihrer angrenzenden Elemente anstelle ihres eigenen Elements gestaltet habe.

Die folgende Abbildung zeigt, wie die ::before Pseudo-Elemente von Boxen in jedem Überblick (mit Ausnahme der ersten Spalte) die Kästchen zu ihrer Linken überlappen, und wie die ::after Pseudo-Elemente von Boxen in jedem Reihe (außer der ersten Reihe) überlappen die Kästchen darüber.

Hier ist der Basiscode

Das Markup ist ziemlich einfach:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

Im anfänglichen CSS ist noch etwas mehr los. Aber zuerst das Gitter selbst:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

Das ist ein Raster aus fünf Zeilen und vier Spalten, die Kontrollkästchen enthalten. Ich habe mich entschieden, das standardmäßige Erscheinungsbild der Kontrollkästchen zu löschen und ihnen dann meinen eigenen hellgrauen Hintergrund und super abgerundete Ränder zu geben:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

Beachten Sie auch, dass die Kontrollkästchen selbst Raster sind. Das ist der Schlüssel für die Platzierung ihrer ::before und ::after Pseudo-Elemente. Apropos, machen wir das jetzt:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

Wir wählen nur die Pseudoelemente von Kontrollkästchen aus, die sich nicht in der ersten Spalte oder der ersten Zeile des Rasters befinden. input:not(:nth-of-type(4n+1)) beginnt beim ersten Kontrollkästchen und wählt dann aus ::before von jedem vierten Artikel von dort. Aber beachten Sie, dass wir sagen :not(), also wirklich, was wir tun, ist Überspringen ::before Pseudo-Element jeder vierten Checkbox, beginnend mit der ersten. Dann wenden wir Stile auf die an ::after Pseudo jedes Kontrollkästchens ab dem fünften.

Jetzt können wir beide stylen ::before und ::after Pseudos für jedes Kontrollkästchen, das sich nicht in der ersten Spalte oder Zeile des Rasters befindet, sodass sie nach links bzw. oben verschoben und standardmäßig ausgeblendet werden.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

Styling der :checked Zustand

Jetzt kommt das Styling der Checkboxen, wenn sie sich in a befinden :checked Zustand. Zuerst geben wir ihnen eine Farbe, sagen wir a limegreen Hintergrund:

input:checked { background: limegreen; }

Ein markiertes Kästchen sollte in der Lage sein, alle angrenzenden markierten Kästchen neu zu gestalten. Mit anderen Worten, wenn wir das elfte Kontrollkästchen im Raster auswählen, sollten wir auch in der Lage sein, die es umgebenden Kästchen oben, unten, links und rechts zu gestalten.

Dies geschieht durch gezieltes Anvisieren der richtigen Pseudoelemente. Wie machen wir das? Nun, es hängt von der tatsächlichen Anzahl der Spalten im Raster ab. Hier ist das CSS, wenn zwei benachbarte Kästchen in einem 5⨉4-Raster aktiviert sind:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

Wenn Sie möchten, können Sie den obigen Code dynamisch generieren. Bei einem typischen Raster, beispielsweise einer Bildergalerie, ist die Anzahl der Spalten jedoch klein und wahrscheinlich eine feste Anzahl von Elementen, während die Zeilen möglicherweise weiter zunehmen. Vor allem, wenn es für mobile Bildschirme entwickelt wurde. Deshalb ist dieser Ansatz immer noch ein effizienter Weg. Wenn Ihre Anwendung aus irgendeinem Grund begrenzte Zeilen und expandierende Spalten hat, sollten Sie das Raster seitlich drehen, da CSS Grid sie bei einem Strom von Elementen von links nach rechts und von oben nach unten (dh Zeile für Zeile) anordnet. .

Wir müssen auch Stile für die letzten Kontrollkästchen im Raster hinzufügen – sie sind nicht alle von Pseudoelementen bedeckt, da sie die letzten Elemente in jeder Achse sind.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

Das sind einige knifflige Selektoren! Der erste…

input:nth-of-type(4n-1):checked + input:checked

… sagt im Grunde Folgendes:

Ein geprüft <input> Element neben einem aktivierten <input> in der vorletzten Spalte.

Und das nth-of-type wird so berechnet:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

Wir beginnen also beim dritten Kontrollkästchen und wählen von dort aus jedes vierte aus. Und wenn ein Kontrollkästchen in dieser Sequenz aktiviert ist, formatieren wir die angrenzenden Kontrollkästchen auch, wenn sie ebenfalls aktiviert sind.

Und diese Zeile:

input:nth-of-type(4n):checked + * + * + * + input:checked

Sagt das:

An <input> Element vorausgesetzt, dass es angekreuzt ist, direkt benachbart zu einem Element ist, das direkt benachbart zu einem anderen Element ist, das ebenfalls direkt benachbart zu einem anderen Element ist, das wiederum direkt benachbart zu einem ist <input> Element, das sich in einem aktivierten Zustand befindet.

Das bedeutet, dass wir jedes vierte aktivierte Kontrollkästchen auswählen. Und wenn ein Kontrollkästchen in dieser Sequenz aktiviert ist, gestalten wir das nächste vierte Kontrollkästchen von diesem Kontrollkästchen, wenn es ebenfalls aktiviert ist.

Gebrauch machen

Was wir uns gerade angesehen haben, ist das allgemeine Prinzip und die Logik hinter dem Design. Wie nützlich es in Ihrer Anwendung ist, hängt wiederum vom Grid-Design ab.

Ich habe abgerundete Ränder verwendet, aber Sie können andere Formen ausprobieren oder sogar mit Hintergrundeffekten experimentieren (Temani hält Sie für Ideen bereit). Jetzt, da Sie wissen, wie die Formel funktioniert, bleibt der Rest Ihrer Fantasie überlassen.

Hier ist ein Beispiel dafür, wie es in einem einfachen Kalender aussehen könnte:

Auch dies ist nur ein grober Prototyp mit statischem Markup. Und es gibt viele, viele Überlegungen zur Barrierefreiheit, die bei einer Kalenderfunktion zu berücksichtigen sind.

---

Das ist ein Wickel! Ziemlich ordentlich, oder? Ich meine, es gibt nichts wirklich „Neues“ an dem, was passiert. Aber es ist ein gutes Beispiel dafür Dinge auswählen im CSS. Wenn wir fortgeschrittenere Auswahltechniken im Griff haben, die Kombinatoren und Pseudos verwenden, können unsere Styling-Möglichkeiten weit über das Styling eines Elements hinausgehen – wie wir gesehen haben, können wir Elemente auf der Grundlage des Zustands eines anderen Elements bedingt stylen.

---

Ausgewählte Elemente in einem Grid-Container bedingt formatieren ursprünglich veröffentlicht am CSS-Tricks.. Du solltest erhalten Sie den Newsletter.

• Coinsmart. Europas beste Bitcoin- und Krypto-Börse.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. DEN FREIEN ZUGANG.
• CryptoHawk. Altcoin-Radar. Kostenlose Testphase.
• Quelle: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/