Erstellen Sie mengenspezifische CSS-Stile und -layouts

Sep 12, 2025

wie man

In diesem Tutorial werfen wir uns einen Blick auf Wege, um die CSS-Stile der Elemente zu ändern, und scheinbar scheinbar ihre Eltern, abhängig von der Anzahl der Elemente. Wir werden auch sehen, wie Sie das Layout der Elemente basierend auf ihrer Menge ändern können, um mehr adaptives zu erstellen Website-Layout. das macht den Raum besser nutzen.

CSS-Tricks, um Ihre Weblayouts zu revolutionieren

Schließlich decken wir die Verwendung von CSS-Zähler ab, um den Index eines Elements innerhalb eines in eingestellten Sets anzuzeigen und die Gesamtzählung innerhalb des Elternteils anzuzeigen. All dies wird nur mit reinem CSS erreicht, ohne dass JavaScript oder Frameworks erforderlich sind, was zu einem einfachen und effizienteren Code führt.

So bauen Sie einen Standort ohne endlosen Code, benötigen Sie a Webseitenersteller . Und unabhängig von den Funktionen Ihrer Website sorgen Sie dafür Web-Hosting Service ist für den Zweck geeignet. Für etwas anderes bekommen Sie Ihre Cloud-Speicherung. bis zu kratzen.

Selektoren für einzelne Elemente.

CSS3 hat nur ein einziges Paar von Selektoren, das die Menge der Elemente ermitteln kann, nämlich das: nur-Kind und: Nur-----Wertypen. Wenn dies gesagt hat, können sie wirklich nur bestimmen, ob sich ein Element selbst befindet oder Geschwister hat. Der nur Kinderwahlschalter entspricht Elementelementen, die das einzige Kind ihres Elternteils sind, während nur Elemente Elemente übereinstimmen, die die einzigen ihrer Art sind.

Das ist leider so weit, dass einzelne Selektoren gehen, aber es gibt einige andere Selektoren, die Elemente auf der Grundlage ihrer Bestellung in einem Satz ähnlicher Elemente abzielen können. Dies sind: NTH-Kind ,: NTH-of-Typ, nth-letztes Kind und nth-letztes Typ, die typischerweise dazu verwendet werden, Elemente auf der Grundlage ihrer Bestellung in einem Satz ähnlicher Elemente anzumelden. Das: NTH-Last-Last-Child- und nth-last-of-of-of-of-of-of--of-of--of-of-of-of-----en Durch die Kombination mit anderen Selektoren können wir komplexere Ketten aufbauen, die spezifische Elemente auf der Grundlage ihrer Menge anwenden.

Mengenspezifische Auswahlketten

selector chains — Selektor: Erster des Typs: NTH-Last-of-of-of---Y (3) und der allgemeine Geschwisterkombinator ~ können kombiniert werden, um den ersten von drei und allen Geschwistern zu zielen, somit alle in einem Satz von drei

Von den vier vorgenannten Selektoren, der Hauptanschluss, den wir in diesem Tutorial verwenden werden, ist der nth-ter-of-of-of-of-of-typ. Die Differenz zwischen diesem und dem NTH-Last-Child-Selektor besteht darin, dass letztere alle Geschwister der Elemente im Set enthält, während der erstere nur Elemente desselben HTML-Typs enthält und daher selektiver selektiver ist. Für den Rest dieses Tutorials verwenden wir die Selektoren vom--of-Typ, jedoch sind die -child-Varianten gleichermaßen gültig.

Der nth-Last-of-of-of-of-----weise kann zusammen mit den populäreren Selektoren von erster Typen verwendet werden, um eine Kette zu erstellen, die das erste Element in einem Satz von einer gewünschten Menge angibt. Zum Beispiel können wir verwenden: Erster von Typ: NTH-Last-of-of--of--of---Y (3) an Zielelemente, die sowohl das erste als auch der dritte vom Ende ihrer Art oder mit anderen Worten, der ersten von einem Satz von drei. Wir können dies dann mit dem allgemeinen Geschwisterkombinator ~ erweitern, um alle Geschwister auszuwählen, die dem ersten einer drei Set von drei folgen. Kombinieren dieser beiden Wählketten können wir einen komplexen Selektor erstellen, der Elemente zielt, die die ersten von drei und allen Elementen desselben Typs sind, die ihm folgen, wodurch alle Elemente in einem Satz von drei ausgewählt werden.

 .Box: Erster von Typ: NTH-Letztyp (3),
.Box: Erster von Typ: nth-last-of-of-of----en (3) ~ .Box

Diese Auswahlkette funktioniert nicht nur für eine bestimmte Anzahl von Elementen, sondern kann sogar modifiziert werden, um einen Mengenbereich zu zielen.

selector chain — Selektoren nth-letztes Typ (n + 2) und: NTH-Last-of-of-of-of---Er (-n + 2) können verwendet werden, um Elemente in Sätzen von mehr als bzw. weniger als zwei zu zielen

Wenn wir Elemente in einem Satz mit einer Menge mehr als oder weniger als einen bestimmten Wert M erreichen möchten, können wir die Kette mit den Techniken (n + m) und (-n + m) verwenden. Um beispielsweise alle Elemente in einem Satz von zwei oder mehr Elementen anzurufen, können wir verwenden:

 .Box: Erster von Typ: NTH-Last-of-of-of-of-of--(n + 2),
.Box: Erster von Typ: nth-last-of-of-of----en (n + 2) ~ .Box

In ähnlicher Weise können wir alle Elemente in einem Satz von zwei oder weniger Elementen anzielen, wobei:

. BOX: Erster von Typ: NTH-Last-of-of--of--N (-n + 2),
.Box: Erster von Typ: NTH-letztes Typ (-n + 2) ~ .Box

Wie Sie sehen, ist dies eine leistungsstarke Auswahlkette, mit der wir sehr interessante und nützliche Dinge erreichen können, ohne dass JavaScript oder andere Frameworks erforderlich sind. Es ist besonders nützlich, wenn es darum geht, adaptive Layouts zu erstellen, die sich basierend auf der Anzahl der Elemente ändern.

Dynamische, mengenspezifische Layouts

grid layouts with odd and even numbers — Für eine gerade Anzahl von Elementen, die Gitterlayouts großartig aussehen, aber nicht so viel für ungerade Zahlen

Nehmen wir an, wir möchten eine Gruppe von Boxen anzeigen, die die Ergebnisse einer Suche oder einem API-Anruf in einem Zwei-Säulen-Gitterlayout anzeigen. Das Problem liegt in der Tatsache, dass die Ergebnisse von einer externen Quelle stammen, und wir haben keine Möglichkeit, die Anzahl der Ergebnisse zu kennen, die zurückgegeben werden, sodass wir nicht wissen, wie viele Kästchen erstellt werden. Während das Raster für eine gerade Anzahl von Boxen großartig aussieht, wenn Sie auf eine ungerade Zahl angewendet werden

Dies ist besonders problematisch, wenn FlexBox-Elemente mit Flex-Wachsen an sie verwendet werden, da das letzte Element dazu führt, dass das letzte Element in den leeren Raum in der Reihe wächst, wodurch die volle Breite aufgenommen wird. Eine Möglichkeit, dies zu verhindern, könnte darin bestehen, die erste einer ungeraden Anzahl von Kästchen eine vollständige Zeile aufzunehmen, indem sie eine Breite von 100% an die ersten Kästchen anwenden, die auch eine ungerade Anzahl von Boxen vom Ende sind, wobei: First-Child: nth-last-of-of-of-of-of-of -typ (ungerade). Dies bietet ein besseres Layout, da er das erste und damit relevanteste oder jüngste Ergebnis mehr als der letzte ergibt.

Wir können sogar einen Sonderfall hinzufügen, wenn die Menge mit drei mit drei miteinander teilzunehmen ist Boxen in einem Satz mit einer Menge, die von drei und allen folgenden Feldern teilbar ist, die ihm folgen.

 .Box {
  Breite: 50%;
}

.Box: First-Child: nth-last-of-of-of-of-of -dy (ungerade) {
  Breite: 100%;
}

.box: First-Child: NTH-Last-of-of-of-of -Typ (3N),
. -Box: First-Child: NTH-Last-of-of-of---E-Typ (3N) ~ .Box {
  Breite: 33%;
}

Fazit

different layouts — Layouts können basierend auf der Anzahl der Elemente geändert werden, die nur mit CSS-Wählketten verwendet werden

Wie wir gesehen haben, können CSS-Selektoren auf einer Vielzahl interessanter Weise zusammengekettet werden, um Stile und adaptive Layouts aufzurufen, die sich auf der Grundlage der Elementmenge ändern. Die Wählketten können auch verwendet werden, um Styles zu scheinbar auf das Elternteil eines Satzes von Elementen einer bestimmten Menge anzuwenden, indem :: Vor oder :: nach Pseudo-Elementen, die so positioniert sind, dass sie die volle Größe des Elternteils aufnehmen kann. In Kombination mit CSS-Zähler können diese Pseudoelemente verwendet werden, um die Gesamtzahl der Nachkommen in einem übergeordneten Element sowie einen Text anzuzeigen, der sich in Abhängigkeit von der Nachkommenmenge ändert.

Diese Techniken bieten eine wertvolle Möglichkeit, dynamische, quantasiebasierte Stile und Layouts zu erstellen, die beim Umgang mit einer unbekannten Anzahl von Elementen nützlich sind, was beim Umgang mit APIs häufig der Fall ist.

Dieser Artikel wurde ursprünglich in Ausgabe 308 von veröffentlicht Netz Das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Kaufen Sie das Thema 308 hier oder Abonnieren Sie hier .

Zum Thema passende Artikel:

5 Tipps für superschnelle CSS
Erstellen Sie ein responsives Layout mit CSS-Raster
Verstehen der CSS-Display-Eigenschaft

Erstellen Sie mengenspezifische CSS-Stile und -layouts

Selektoren für einzelne Elemente.

Mengenspezifische Auswahlketten

Dynamische, mengenspezifische Layouts

Fazit

wie man - Die beliebtesten Artikel

10 Möglichkeiten, bessere 3D-Weltumgebungen aufzubauen

Bauen Sie Gelände in Houdini 17

Master der Mischerbürste in Photoshop

Fügen Sie digitale Farben an Bleistiftzeichnungen hinzu

Wie erstellt man einen Mandelbulb

Machen Sie interaktive 3D-Typografie-Effekte

Machen Sie ein Logo in Illustrator

So gestalten Sie einen animierten Helden

Kategorien