Bisher waren komplexe :nth-child-Schleifen oder JavaScript erforderlich, um Inline-Stile einzufügen, wenn Sie jedem gleichgeordneten Element in einer Liste einen eindeutigen Stil zuweisen wollten. Modernes CSS bietet sibling-index() und sibling-count(), um diese Berechnungen direkt im Stylesheet durchzuführen. So können dynamische Layouts und Farbsysteme erstellt werden, die sich automatisch anpassen, wenn Elemente hinzugefügt oder entfernt werden.
Dynamische Farbsysteme
Sie können ein Farbspektrum für eine Gruppe von gleichgeordneten Elementen erstellen, indem Sie für jedes untergeordnete Element einen eindeutigen Farbton- oder Helligkeitswert berechnen. So wird ein einheitlicher Verlaufseffekt unabhängig von der Anzahl der Elemente gewährleistet.
.swatch {
/* Calculate hue by dividing the full 360deg circle by total siblings */
/* and multiplying by the current element's 1-based index */
background-color: hsl(
calc(360deg / sibling-count() * sibling-index()),
70%,
50%
);
}
Symmetrisches Layout und Fächereffekte
Wenn Sie symmetrische Effekte erstellen möchten (z. B. einen „Fächer“ oder zentrierte Elemente), verwenden Sie die Gesamtzahl, um den Mittelpunkt der Liste zu finden.
.card {
/* Find the center index (e.g., 3 if there are 5 siblings) */
--center: calc((sibling-count() + 1) / 2);
/* Rotate items away from the center: negative for left, positive for right */
/* center element gets 0deg rotation */
transform: rotate(calc(10deg * (sibling-index() - var(--center))));
}
Kreisförmige und komplexe Positionierung
Wenn Sie diese Funktionen mit CSS-Trigonometrie (sin(), cos()) kombinieren, können Sie Elemente ohne manuelle Koordinaten in einem perfekten Kreis platzieren.
.orb {
/* Calculate the angle for this item's position on a 360deg circle */
--angle: calc(360deg / sibling-count() * sibling-index());
--radius: 150px;
/* Set the pre-transformed position for all items to be centered */
position: absolute;
place-self: center;
/* Position each element around the parent center */
transform: translate(
calc(cos(var(--angle)) * var(--radius)),
calc(sin(var(--angle)) * var(--radius))
);
}
Fallback-Strategien
Wenn sibling-index() und sibling-count() nicht unterstützt werden, stellen Sie einen Fallback bereit, indem Sie benutzerdefinierte CSS-Eigenschaften über JavaScript einfügen. VERPFLICHTEND: Verwende die Funktionserkennung mit CSS.supports(), damit das Script nur bei Bedarf ausgeführt wird.
/* MANDATORY: Check for native support before applying fallback */
if (!CSS.supports('top: calc(sibling-index() * 1px)')) {
const items = document.querySelectorAll('.item');
items.forEach((item, index) => {
/* MANDATORY: Injected index must be 1-based to match native function */
item.style.setProperty('--sibling-index', index + 1);
item.style.setProperty('--sibling-count', items.length);
});
}
Verwenden Sie diese Variablen in Ihrem CSS als Basis und überschreiben Sie sie mit nativen Funktionen in einem @supports-Block. OBLIGATORISCH: Sie MÜSSEN die Überschreibungen nativer Funktionen in @supports einschließen, damit die Variablen in älteren Browsern gültig bleiben.
.item {
/* 1. Set base values using variables (from JS fallback) */
--index: var(--sibling-index);
--count: var(--sibling-count);
/* 2. Use the computed variables - replace this with your implementation-specific styles */
background-color: hsl(calc(360deg / var(--count) * var(--index)), 70%, 50%);
}
@supports (top: calc(sibling-index() * 1px)) {
.item {
/* 3. Override with native functions ONLY if supported */
--index: sibling-index();
--count: sibling-count();
}
}