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

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

sibling-count() - CSS | MDN

Limited availability

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

The sibling-count() CSS function returns an integer representing the total number of direct child DOM elements of the parent element on which it is used.

Note: The counter() function provides a similar result but it returns a <string>, while sibling-count() returns an <integer> which can be used for calculations.

--total-sibling-elements: sibling-count();

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

An integer; the total number of direct child DOM elements.

This example demonstrates setting the number of columns on a container to be equal to the number of its children, enabling placing each child in its own column.

We include a <ul> container and several <li> elements children.

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

We set the column-count of the container to be equal to the quantity of direct children it contains. We also set every odd element to have a background-color to better demonstrate the resulting effect.

ul {
  column-count: sibling-count();
  text-align: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li:nth-of-type(odd) {
  background-color: rgb(0 0 0 / 0.05);
}

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