Menu
Given an arbitary number of flexbox children with an inline order attribute used for sorting, how would one 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 doesn't work on flex children, and the list can be any length, so selecting by order index isn't an option. I'm not interested in JavaScript solutions.
684
The display property is not inherited, so display: flex is not either.
How to select an element that is the first or last child of its parent. The :first-child pseudo class means "if this element is the first child of its parent". :last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes.
The :last-of-type selector allows you to target the last occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content. ).
The only close solution to this is may be
div[style="order: 6"] {
background-color: yellow;
}
And this will color the background with yellow for the 6th order, but since we don't know the length of the array, it seems like you'll need some javascript or jQuery with similar selector sintaxis where the number 6 in this case will be a variable with the array's length.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
