CSSWG Issue: w3c/csswg-drafts#4559
Demo: https://codepen.io/bramus/pen/oNVqZZq/546b6c9793668ad461329fb34732657f?editors=0110
@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;
}
@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;
}
@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;
}