Styling siblings based on count and index

Webfuncties: sibling-count() en sibling-index() Goniometrische functies (CSS)

In het verleden waren complexe :nth-child-loops of JavaScript nodig om unieke stijlen toe te passen op elk onderliggend element in een lijst. Moderne CSS biedt sibling-index() en sibling-count() om deze berekeningen rechtstreeks in je stylesheet uit te voeren. Zo kun je dynamische lay-outs en kleursystemen maken die zich automatisch aanpassen als elementen worden toegevoegd of verwijderd.

Dynamische kleursystemen

U kunt een kleurenspectrum maken voor een groep onderliggende elementen door een unieke tint of helderheidswaarde voor elk onderliggend element te berekenen. Zo zorg je voor een consistent verloopeffect, ongeacht het aantal items.

.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%
  );
}

Symmetrische indeling en waaiereffecten

Als je symmetrische effecten wilt maken (zoals een waaier of gecentreerde items), gebruik je het totale aantal om het middelpunt van de lijst te vinden.

.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))));
}

Cirkelvormige en complexe positionering

Door deze functies te combineren met CSS-trigonometrie (sin(), cos()), kun je elementen in een perfecte cirkel plaatsen zonder handmatige coördinaten.

.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))
  );
}

Reservestrategieën

Als sibling-index() en sibling-count() niet worden ondersteund, biedt u een fallback door aangepaste CSS-property's te injecteren via JavaScript. VERPLICHT: Gebruik functiedetectie met CSS.supports() om te zorgen dat het script alleen wordt uitgevoerd als dat nodig is.

/* 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);
  });
}

Gebruik deze variabelen in je CSS als basis en overschrijf ze met systeemeigen functies in een @supports-blok. VERPLICHT: U MOET de overschrijvingen van de native functie verpakken in @supports om te zorgen dat de variabelen geldig blijven in oudere browsers.

.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();
  }
}