CSS: select last ordered flex children

Question

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.

you need javascript to test order values, CSS will not do this :( — G-Cyrillus, Apr 17 '15 at 22:30

score 3 · Answer 1 · answered Apr 18 '15 at 15:37

3

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.

answered Apr 18 '15 at 15:37

Marin Takanov

1,079
3
19
36

11

Yeah, maybe I should propose `:first-order`, `:last-order`, `:nth-order` to the workgroup ;) – silverwind Apr 19 '15 at 04:55

score 0 · Answer 2 · answered Nov 02 '21 at 18:36

Adding to @Marin Takanov's answer above, this method will only work when setting the order style inline. It fails when hooking into an order set in the stylesheet ...which is annoying if you only have access to the stylesheet but not the actual code.

HTML

<ul>
  <li id="o4" style="order: 4">4</li>
  <li id="o5" style="order: 5">5</li>
  <li id="o6" style="order: 6">6</li>
  <li id="o3">3</li> <!-- Fails -->
  <li id="o1" style="order: 1">1</li>
  <li id="o2" style="order: 2">2
    <ul>
      <li id="o2s1" style="order: 1">a</li>
      <li id="o2s2" style="order: 2">b</li>
      <li id="o2s6" style="order: 6">f</li>
      <li id="o2s3">c</li> <!-- Fails -->
      <li id="o2s4" style="order: 4">d</li>
      <li id="o2s5" style="order: 5">e</li>
    </ul>
  </li>
</ul>

SCSS:

ul {
  display: flex;
  flex-direction: column;

  li#o3 {
    order: 3;
  }

  li[style="order: 3"] {
    background-color: red;
  }

  li#o6 {
    order: 6;
  }

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

JSFiddle:

https://stackoverflow.com/a/29719382/1522214

score -1 · Answer 3 · answered Apr 17 '15 at 21:42

-1

Your code isnt complete. You have to provide a flex wrapper to your divs (display: flex), so that =order: will validate. Therefore, .wrapper div:last-child should do the trick.

answered Apr 17 '15 at 21:42

designarti

609
1
8
18

1

are you sure ? http://codepen.io/anon/pen/ZGzLer the last-child remains the one from the DOM not the one reordered .so is :first-type, nth-last-of-type(x), ... ;) – G-Cyrillus Apr 17 '15 at 22:30
I think you're right. Not working with CSS. Should I edit my answer? – designarti Apr 18 '15 at 00:29
Yeah, I implied a `display:flex` parent. Still a shame this isn't possible from css alone. – silverwind Apr 18 '15 at 12:02

CSS: select last ordered flex children

3 Answers3

Linked