CODEWITHSUNDEEP
htmlcsssasscss-selectorsflexbox
Barbara
Barbara

Reputation: 61

How to combine flexbox order and nth-child(odd)

I have 5 divs, every second div should have a different colour than the others. 

<div class="element element1">Element1</div>
<div class="element element2">Element2</div>
<div class="element element3">Element3</div>
<div class="element element4">Element4</div>
<div class="element element5">Element5</div>

In my CSS I have

.element {
 background-color: grey;
}

.element:nth-child(odd) {
 background-color: pink;
}

Now dynamically the order of those elements will change, which I want to do with flexbox. Meaning my CSS looks like this then:

.element {
 background-color: grey;
 display:flex;
}

.element5 {
 order: 1;
}

.element2 {
 order: 2;
}

As flexbox is not changing the DOM, the nth-child(odd) will still style every second DOM Element, which is not the order the user will see. But that's what I want. Every second element the users sees should have a different colour, even if the element changes the order with flexbox. Has anyone an idea how this could work? I can only use CSS or HTML for this, no JavaScript or PHP.

Upvotes: 6

Views: 16326

Answers (2)

dFelinger
dFelinger

Reputation: 97

My solution:

div {
  display: flex;
  flex-direction: column;
}

div > div {
  order: 1;
  background-color: #868d95;
}

div > div:nth-child(odd) {
  background-color: #a7acb2;
}

div > div.active {
  order: 0;
  background-color: #20c36d;
}

div > div.active ~ div {
  background-color: #a7acb2;
}

div > div.active ~ div:nth-child(odd) {
  background-color: #868d95;
}
<div>
  <div>1</div>
  <div>2</div>
  <div class="active">3</div>
  <div>4</div>
  <div>5</div>
  <div>7</div>
  <div>8</div>
</div>

scss:

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

  & > div {
    order: 1;
    background-color: #868d95;

    &:nth-child(odd) {
      background-color: #a7acb2;
    }

    &.active {
      order: 0;
      background-color: #20c36d;

      & ~ div {
        background-color: #a7acb2;

        &:nth-child(odd) {
          background-color: #868d95;
        }
      }
    }
  }
}

Upvotes: -1

T04435
T04435

Reputation: 14022

Assuming the layout is always going to be as you put it above.

First You need to set display flex in a container, not in the elements.

Second, if you set Element 5|2 to order 1|2 respectively they will always be at the end as default order is 0(zero).

so you end with | assume bold is odd new colour

ORIGINAL ORDER(DOM): 1 2 3 4 5

FLEX ORDER: 1 3 4 5 2

.flex-container {
  /*SET DISPLAY FLEX ON CONTAINER*/ 
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}
/*SET THE NEW ORDER*/
.element:nth-of-type(2){ order: 2;}
.element:nth-of-type(5) { order: 1; }

/*PRESENTATION PROPOUSES ONLY*/
.element,
.normal{
  background: grey;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 5px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

/* TARGET NEW ODD ELEMENTS*/
.element:nth-of-type(1),
.element:nth-of-type(2),
.element:nth-of-type(4){
  background: pink;
}

/* TARGET ORIGINAL ORDER*/
.normal:nth-child(odd){
background: pink;
}
<h1>FLEX ORDER</h1>
<div class="flex-container">
  <div class="element element1">1</div>
  <div class="element element2">2</div>
  <div class="element element3">3</div>
  <div class="element element4">4</div>
  <div class="element element5">5</div>
</div>
<h1>ORIGINAL ORDER</h1>
<div class="flex-container">
  <div class="normal">1</div>
  <div class="normal">2</div>
  <div class="normal">3</div>
  <div class="normal">4</div>
  <div class="normal">5</div>
</div>

If you were to use the Flex & Order only in certain device.Let's say you want default order(12345) in mobile and flex + order(13452) from tablet up you can have @media queries leaving the default(ORIGINAL ORDER) to change colours with nth-child(odd) and then for other devices inside media queries add the above code(FLEX ORDER).

Thanks.

Upvotes: 2

Related Questions