Etwas Hintergrund: Ich versuche ein Layout zu erreichen, bei dem die Elemente von links nach rechts in einer Zeile, dann von rechts nach links in der nächsten Zeile fließen usw. Ich habe etwas in CodePen ausgeheckt. Schau hier nach (es erklärt es besser als ich kann!)
> Ich habe das obige Beispiel mit nth-child erreicht, aber es ist 'hardcoded', z. B.
HTML:
%Vor%CSS:
%Vor% Nun, das funktioniert, aber es ist offensichtlich auf eine bestimmte Anzahl von Elementen beschränkt (wie viele gebe ich in das CSS ein!). Ich weiß, dass ich :nth-child(4n) machen kann, um jedes vierte Element zu erhalten, aber ich möchte in der Lage sein, und die nächsten vier auszuwählen. Es ist fast wie nth-child(odd) , aber für Gruppen von 4 Elementen / p>
Gibt es eine Möglichkeit, dies programmatisch zu tun? Ich habe Tweaking Quantity Queries ( Ссылка ) angeschaut, aber das scheint nicht ganz das zu sein, wonach ich suche ...
Jede Hilfe sehr geschätzt !!
Ja, Sie können eine Gruppe von nth-child selectors wie im folgenden Ausschnitt verwenden, um eine sich wiederholende Gruppe von Elementen basierend auf einem Muster auszuwählen.
Es ist zu beachten, dass die Auswahl jedes vierten Elements und der nächsten vier nach der Auswahl aller Elemente nach dem vierten Element erfolgt. Daher habe ich das Sample auf die nächsten zwei Elemente beschränkt.
Erklärung des Selektors (wählt 4., 5., 8., 9. Elemente usw.):
nth-child(4n+4) - wählt 4. (4 * 0 + 4), 8. (4 * 1 + 4), 12. (4 * 2 +4) Elemente nth-child(4n+5) - wählt 5. (4 * 0 + 5), 9. (4 * 1 + 5), 13. (4 * 2 + 5) Elemente. Wie Sie aus der Erklärung sehen können, beginnt die Reihe mit dem vierten Element und wiederholt sich von da an. Wenn Sie mit der Reihe aus dem ersten Element (zB 1., 2., 5., 6. usw.) beginnen möchten, können Sie die Auswahlgruppe als div:nth-child(4n+1), div:nth-child(4n+2) verwenden.
Erklärung des Selektors (wählt 4., 5., 12., 13. Element usw.):
nth-child(8n+4) - wählt 4. (8 * 0 + 4), 12. (8 * 1 + 4), 20. (8 * 2 +4) Elemente nth-child(8n+5) - wählt 5. (8 * 0 + 5), 13. (8 * 1 + 5), 21. (8 * 2 + 5) Elemente. Wie Sie aus der Erklärung sehen können, beginnt die Reihe mit dem vierten Element und wiederholt sich von da an. Wenn Sie mit der Reihe aus dem ersten Element (zB 1., 2., 5., 6. usw.) beginnen möchten, können Sie die Auswahlgruppe als div:nth-child(4n+1), div:nth-child(4n+2) verwenden.
Tags und Links css css3 css-selectors