CSS: select the latest flexible kids to order

Question

Given an arbitrary number of flexbox children with the built-in order attribute used for sorting, how do I select the last ordered element in CSS?

 <ul style="display:flex"> <li style="order: 4">a</li> <li style="order: 5">b</li> <li style="order: 3">c</li> <li style="order: 1">d</li> <li style="order: 2">e</li> </ul> 

:last-of-type does not work with flexible children, and the list can be of any length, so selecting by order index is not an option. I'm not interested in JavaScript solutions.

Answer 1

The only close solution to this could be

 div[style="order: 6"] { background-color: yellow; } 

And this color will be painted yellow for the 6th order, but since we do not know the length of the array, it seems you will need javascript or jQuery with the same selector syntax, where the number 6 in this case will be a variable with the length of the array.

Answer 2

Your code is not complete. You must provide a flexible wrapper for your divs (display: flex) so that = order: will be checked. Therefore .wrapper div: last-child should do the trick.