1

:nth-child(odd) selects alternate elements by their source order, not the resulting order according to the flexbox order. Is there any way to select for resulting order instead?

The jsfiddle illustrates the problem: the source order of the divs is one three two, and I reorder to one two three using flexbox order. I want to make the background of one and three red.

<div style='display: flex' class='container'>
  <div style='order: 1'>one</div>
  <div style='order: 3'>three</div>
  <div style='order: 2'>two</div>
</div>

<style type='text/css'>.container>:nth-child(odd) { background-color: red; }</style>

https://jsfiddle.net/5Lxr08sr/

Christopher Best
  • 466
  • 4
  • 14
  • 1
    Similar to http://stackoverflow.com/questions/29709793/css-select-last-ordered-flex-children. Basically there is no such CSS selector. You'd have to hard-code using attribute selector (or) find other means (maybe using JavaScript) – Harry Mar 11 '16 at 16:31

0 Answers0