Ich habe ein CSS-Gitter mit einer Reihe von automatisch geflossenen Gitterelementen. Manchmal sind die Gitterelemente eine 1 x 1-Spur, und manchmal sind es 2 x 2 Spuren, so dass ich nicht weiß, aus welcher Reihenfolge die Elemente an bestimmten Positionen im Gitter sind. Dies bedeutet, dass das Styling mit :nth-child() nicht zuverlässig ist.
Ich möchte Elemente in bestimmten Rasterspalten (meistens die letzte Spalte) umgestalten. Gibt es einen CSS-Selektor, mit dem ich diese Elemente stylen kann?
Wie würde ich beispielsweise in dieser Demo die Boxen 3, 5 und 9 gestalten ( hier codepen )? ?
Bearbeiten: Der Code wird in einem CMS gespeichert und kann sich in Zukunft ändern.
Es gibt keine Auswahlelemente für übereinstimmende Elemente in bestimmten Rasterpositionen, wenn das Raster mit CSS gerendert wird. Die grid-strukturellen Selektoren, die in Selektoren 4 eingeführt wurden , stimmen nur mit Elementen überein, die auf Gridstrukturen basieren, die in Dokumentensemantik ausgedrückt sind. wie Tabellen in HTML (was auch bedeutet, dass sie Elemente, die auf Gittersemantik basieren, nicht zuordnen können, wenn sie nicht-tabellarische Elemente sind, die mit display: table-* dargestellt werden).
Ein ähnliches Problem gibt es bei flexbox: Es gibt keine Selektoren für die Zuordnung bestimmter Flex-Elemente, je nachdem, wie sie ausgelegt sind. Im Allgemeinen gibt es keine Selektoren, die Elemente aufgrund ihres Layouts entsprechen, das von CSS gesteuert wird. Selektoren stimmen nur Elemente auf der Grundlage der Dokument-Semantik (Quellreihenfolge usw.) ab.
Um die gewünschten Elemente zu formatieren, müssen Sie sie auf andere Weise identifizieren, z. B. ein clientseitiges Skript oder eine Back-End-Logik, die Elemente basierend auf ihren Rasterpositionen mit Klassen beschriftet (sofern das Rasterlayout darin konfiguriert ist) das Backend). Wie Sie dies tun, liegt außerhalb des Rahmens dieser Frage.
Tags und Links html css css3 css-selectors css-grid