Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index below:

sibling-index() - CSS | MDN

Limited availability

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The sibling-index() CSS function returns an integer representing the position of the current element in the DOM tree relative to all its sibling elements. The returned value is the index number of the contextual child's position among all the sibling elements within a parent element, with the first child returning 1 and the last child, returning Element.children.length.

--width: calc(sibling-index() * 30px);

--width: calc(sibling-index() * 20px);

--width: calc(sibling-index() * 10px);

<ul id="example-element">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

#example-element {
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#example-element > li {
  text-align: center;
  padding: 2px;
  border-radius: 8px;
  width: var(--width, calc(sibling-index() * 30px));
  color: #fff;
  background-color: hsl(
    calc(360deg / sibling-count() * sibling-index()) 50% 50%
  );
}

Note: Like the :nth-child() pseudo-class, sibling-index() starts from 1, not 0.

li {
  width: calc(sibling-index() * 100px);
}

The sibling-index() function doesn't accept parameters.

An integer; the position of the current element in the DOM tree's sibling order.

This example demonstrates how to dynamically increase the width of each <li> item in the <ul> by 50px.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

li {
  width: calc(sibling-index() * 50px);
  background-color: #faa;
}

This example demonstrates how to create an ordered list using sibling-index(), without using the <ol> element. Always use the most semantic element for the context; this example is included to demonstrate what can be done with CSS when you don't have the ability to change the HTML.

We include a <nav> container and several children <div> elements.

<nav arial-label="Ordered list">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</nav>

We make it visually appear as a numbered list by displaying the sibling-index before each <div> element using the ::before pseudo-element, setting the content to be the integer returned by the sibling-index() function.

div {
  --list-index: sibling-index();
  display: flex;
  gap: 1ch;
}

div::before {
  content: var(--list-index);
}

Combining sibling-index() with CSS animations opens new possibilities. In this example, the opacity of elements in sequential order by setting an animation-delay based on their order in the DOM.

We include a container element with four children:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

We apply the fade-in animation to each element. We use the sibling-index() function within a calc() function to set the duration of the animation-delay based on the source element's position in the source order. The animation-fill-mode applies the animation's 0% keyframe until the animation-duration expires.

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  animation-name: fade-in;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
  animation-delay: calc(1s * sibling-index());
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4