Skip to content

CSS example has type incompatibility #41290

@urffin

Description

@urffin

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index

What specific section or headline is this issue about?

https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index#css_2

What information was incorrect, unhelpful, or incomplete?

Incorrect sample

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

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

sibling-index returns number value, and content property avail only string, so this sample not working. element ::before not created.

What did you expect to see?

I expect fix this, for example use counters

https://developer.mozilla.org/en-US/play?id=zjs%2BiXkQOJQx8fdwOlDSH56IjDGx8QUbl%2FafbhGwBrluzJLPBBDNq8hw174KjEQIfrN2CPe5FEyaFG15

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

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

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

Metadata

Metadata

Assignees

No one assigned

    Labels

    Content:CSSCascading Style Sheets docshelp wantedIf you know something about this topic, we would love your help!

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions