Skip to content

[css-values-5] Introduce sibling-index() and sibling-count() (#4559) #9134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

[css-values-5] Introduce sibling-index() and sibling-count() (#4559) #9134

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3de8d1d
[css-values-5] Introduce `sibling-index()` and `sibling-count()` (#4559)
bramus Jul 21, 2023
e6269d9
Fix ids
bramus Aug 29, 2023
af5ce47
These functions resolve at computed value time
bramus Aug 29, 2023
30de15b
Clarify that it's the inclusive flat tree siblings
bramus Aug 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions css-values-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -945,8 +945,51 @@ Generating/Caching Random Values: the <<random-caching-options>> value</h4>
</pre>
</div>

<!--
████████ ██ ████████ ██ ██ ████████ ██ ██ ████████ ██████ ███████ ██ ██ ██ ██ ████████ ████ ██ ██ ██████
██ ██ ██ ███ ███ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ███ ██ ██ ██
██ ██ ██ ████ ████ ██ ████ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ████ ██ ██
██████ ██ ██████ ██ ███ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████
██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ████ ██ ██
██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ███ ██ ██
████████ ████████ ████████ ██ ██ ████████ ██ ██ ██ ██████ ███████ ███████ ██ ██ ██ ████ ██ ██ ██████
-->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Keep these headings as short as possible; if they wrap (as they definitely will on many screens, given how long these lines are) they become unreadable. I'd probably just do "COUNT" or maybe two lines having "INDEX" and "COUNT".


<h2 id=element-counting>
Counting Elements</h2>

Authors often want to apply element specific styles
based on the position of the element within the tree.

The ''sibling-index()'' and ''sibling-count()'' functions
(the <dfn export for=CSS>element counting functions</dfn>)
allow authors to take these factors into account in ''calc()'' expressions.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
allow authors to take these factors into account in ''calc()'' expressions.
allow authors to take these factors into account anywhere that allows <<integer>>s,
such as in [=math functions=].

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Just a light rewrite to avoid implying that these are only valid in calc().)


With these, authors can create things like staggered animation delays
or easily position elements on a circle.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
or easily position elements on a circle.
or easily position elements evenly around a circle.


These functions are substituted with whatever value they resolve to
at [=computed value=] time.

<h3 id=sibling-index>
Getting the position of an element within its siblings: the ''sibling-index()'' function</h3>

The <dfn>sibling-index()</dfn> function resolves to the position
of an element within its group of <a>inclusive siblings</a>
Comment on lines +977 to +978
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The <dfn>sibling-index()</dfn> function resolves to the position
of an element within its group of <a>inclusive siblings</a>
The <dfn>sibling-index()</dfn> function resolves to the <<integer>>
representing the element's index within its list of <a>inclusive siblings</a>

in the <a>flat tree</a>.

Similar to '':nth-child()'', the list of elements is <b>1-indexed</b>;
that is, the first child of an element has index 1.

<h3 id=sibling-count>
Getting the number of siblings an element is part of: the ''sibling-count()'' function</h3>

The <dfn>sibling-count()</dfn> function resolves to the total number of
<a>inclusive siblings</a> in the <a>flat tree</a> an element is part of.
Comment on lines +987 to +988
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The <dfn>sibling-count()</dfn> function resolves to the total number of
<a>inclusive siblings</a> in the <a>flat tree</a> an element is part of.
The <dfn>sibling-count()</dfn> function resolves to the <<integer>>
representing the total number of the element's <a>inclusive siblings</a>
in the <a>flat tree</a>.


That is, it resolves to
the total number of direct children the element’s parent element contains,
<a lt="flat tree">after flattening</a>.

<!--
████████ ████████ ██████
Expand Down