CSS `sibling-count()`, `sibling-index()`, and `child-count()` current workarounds

css.md

CSS sibling-count(), sibling-index(), and child-count() current workarounds

CSSWG Issue: w3c/csswg-drafts#4559

Demo: https://codepen.io/bramus/pen/oNVqZZq/546b6c9793668ad461329fb34732657f?editors=0110

sibling-index()

@property --sibling-index {
  syntax: "<number> | false";
  initial-value: false;
  inherits: false;
}

[data-countable] :nth-child(1) {
  --sibling-index: 1;
}
[data-countable] :nth-child(2) {
  --sibling-index: 2;
}
[data-countable] :nth-child(3) {
  --sibling-index: 3;
}

sibling-count()

@property --sibling-count {
  syntax: "<number> | false";
  initial-value: false;
  inherits: false;
}

[data-countable]:has(> *:nth-child(1):last-child) > * {
  --sibling-count: 1;
}
[data-countable]:has(> *:nth-child(2):last-child) > * {
  --sibling-count: 2;
}
[data-countable]:has(> *:nth-child(3):last-child) > * {
  --sibling-count: 3;
}

child-count()

@property --child-count {
  syntax: "<number> | false";
  initial-value: false;
  inherits: false;
}

[data-countable]:has(> *:nth-child(1):last-child) {
  --child-count: 1;
}
[data-countable]:has(> *:nth-child(2):last-child) {
  --child-count: 2;
}
[data-countable]:has(> *:nth-child(3):last-child) {
  --child-count: 3;
}