Initially, I understand that achieving this can be done through JS (and currently have this method in place), however, I would rather utilize native CSS if feasible. Less JS, less DOM access, and so on.
In Short
Is there a CSS selector available to target elements with a specific CSS property? More precisely, to target the element with the highest order property?
Something along the lines of...
el:highest(property:order) {...}
Scenario
I have a list structured like...
<div class="list-container">
<ul class="list">
<li style="order: 0;">One</li>
<li style="order: 1;">two</li>
<li style="order: 2;">three</li>
...
<li style="order: n;">Last</li>
</ul>
</div>
This is utilized as an infinite scroller, where the entire list (ul) scrolls inside the container. The specifics are not significantly crucial, but essentially the number of list items remains constant and are recycled as the user scrolls.
Note: Despite the fixed number of list items, there are no limits to the maximum order number. If the initial orders are order=0, 1, 2, 3 (list of four items), then 0->4, 1->5, 2->6, and so forth. Only one order changes at a time - either greater than all others (end of the list) or lesser than all others (start of the list).
I achieve this recycling effect by presenting the list as a flex-box and programmatically altering the order of the list items.
More relevant CSS includes something similar to...
.list-container {
overflow: scroll;
}
ul.list {
display: flex;
flex-direction: column;
list-style: none;
}
li {
... other rules
margin-bottom: 5px;
}
li:last-child {
margin-bottom: 0;
}
Each list item contains a bottom-margin to act as a spacer between each item for visual appeal. However, it appears odd when you reach the bottom of the list and encounter unnecessary spacing before the end of the list container. Therefore, the last-child setting removes the bottom margin.
The final appearance of the list resembles...
https://i.sstatic.net/21BgG.png
... please note: the list BG is set to red for visibility of padding, and li:last-child has BG set to aqua to highlight which item represents the last.
Issue resolved, right!?
However, The Problem...
(Assuming the list has n list items.)
In a typical list scenario, the above CSS implementation functions perfectly. The problem arises when I take the top list item (order: 0;) and update its order, causing it to move to the bottom of the list (order: n+1;). Although the list item may appear positioned and shown at the bottom of the list, it is still recognized within the DOM as the first list item.
The DOM structure is as follows...
<div class="list-container">
<ul class="list">
<li style="order: n+1;">One</li>
<li style="order: 1;">two</li>
<li style="order: 2;">three</li>
...
<li style="order: n;">Last</li>
</ul>
</div>
Consequently, the outcome appears as...
https://i.sstatic.net/xrgnt.png
Since the list item with order: n; persists as the last-child in the DOM, its bottom margin gets removed, even though another list item is displayed below it.
A similar issue arises when using margin-top and li:first-child. It's an unavoidable challenge!
Therefore, Can I...?
Is there a native CSS technique to target the element possessing the highest order number? Or alternatively, is there another CSS-only workaround to achieve a comparable result?
Many thanks!