How to style an element based on its flex box order

Question

I have some elements inside a DIV which get reordered depending on the size of the screen. I want to style each of these elements differently depending on their flex-box order. Because the media queries are inside a framework, I'd rather not write my own media queries to do this, because I don't want to have to remember to change my media queries if the framework changes the break points for their media queries. I tried using the + sibling selector, but apparently this only applies to the order of elements in the original markup, not the flex box rendering order. Is there any way to style an element based on the order in which it appears in the rendered DOM?

No. CSS selects elements...not styles. It can't tell whether an element has a specific style or not. You'd need Javascript. — Paulie_D, Sep 16 '15 at 11:06
possible duplicate of [CSS selector by style attribute](http://stackoverflow.com/questions/8426882/css-selector-by-style-attribute) — Paulie_D, Sep 16 '15 at 11:07
I'm not necessarily looking for a CSS style selector. I realize, if there was a way to do this reliably, that would solve my problem; however, that's obviously not possible, so I'm trying to see if there is some way to style an element based on the order in which it appears in the rendered DOM. I will update the question to clarify this. — Trevor, Sep 16 '15 at 16:13
"I'm trying to see if there is some way to style an element based on the order in which it appears in the **rendered** DOM". Nope...only the *actual* DOM. — Paulie_D, Sep 16 '15 at 17:29
No, you would have to either replicate the media-queries to apply a specific style, or do that on the framework side. You could also check the computed order in JS. — Capsule, Jul 20 '17 at 23:42
Not a duplicate, but related and more in depth https://stackoverflow.com/questions/28708741/how-do-i-select-an-element-based-on-the-state-of-another-element-in-the-page-wit — roberrrt-s, Nov 24 '17 at 09:43

score 1 · Answer 1 · edited Mar 27 '21 at 08:27

As mention in the comments, you wont be able to use nth-child, as the styles will apply to the order of the actual DOM, not the rendered DOM.

You will have to add extra classes to the markup in order to do this. So rather than re-order using nth-child, re-order using the extra classes.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.flexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.flexGrid__item {
  border: 1px solid pink;
  width: 50%;
  height: 100px;
}

.flexGrid__item--alpha {
  background: pink;
  order: 1;
}

.flexGrid__item--bravo {
  order: 2;
}

.flexGrid__item--charlie {
  order: 3;
}

.flexGrid__item--delta {
  order: 4;
}

@media screen and (min-width: 500px) {
  .flexGrid__item {
    width: 25%;
  }
  .flexGrid__item--alpha {
    order: 5;
  }
}

<div class="flexGrid">
  <div class="flexGrid__item flexGrid__item--alpha"></div>
  <div class="flexGrid__item flexGrid__item--bravo"></div>
  <div class="flexGrid__item flexGrid__item--charlie"></div>
  <div class="flexGrid__item flexGrid__item--delta"></div>
</div>

More detail in this fiddle: https://jsfiddle.net/pua5u8a4/1/

By other words, "there is no specialized solution in pure CSS"? — Takeshi Tokugawa YD, Jul 21 '21 at 06:02

How to style an element based on its flex box order

1 Answers1