Targeting the first element after the CSS command

Please see this codepen: http://codepen.io/muji/pen/XpEYzO

I need to target the first element after it has been sorted by a css "order" property and give it another CSS property.

Is there some jQuery or something I can use to find the first element after sorting, and then addClass, or something? Many thanks for any help

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.featured {
  order: 1;
}
.normal {
  order: 2;
}
.wrap div {
  flex-basis: 50%;
  background: #ddd;
  border: 2px solid #000;
}

/*this is the part I need help with, as it should only apply to the first element AFTER applying the "order" attribute*/
.wrap div:first-of-type {
  flex-basis: 100%;
  background: #f00;
}

<h3>wp_query 1 output:</h3>
<div class="wrap">
  <div class="normal">Normal</div>
  <div class="normal">Normal</div>
  <div class="featured">A featured item</div>
  <div class="normal">Normal</div>
  <div class="featured">A featured item</div>
  <div class="normal">Normal</div>
</div>

<h3>wp_query 2 output:</h3>
<div class="wrap">
  <div class="normal">Normal</div>
  <div class="normal">Normal</div>
  <div class="normal">Normal</div>
  <div class="normal">Normal</div>
</div>

An alternative to the position top suggested by @Nenad Vracar would be to actually filter the elements with the smallest order in each group and highlight the first one (in terms of dom order)

$('.wrap').each(function() {
  var items = $(this).children(),
    minOrder = Infinity,
    details = items.map(function(i, el) {
      var order = +$(el).css('order');
      if (minOrder > order) minOrder = order;
      return {
        element: el,
        order: order
      };
    }).get(),
    firstElement = details.filter(function(item) {
      return item.order == minOrder;
    })[0];

  $(firstElement.element)
    .addClass('highlight')
    .siblings()
    .removeClass('highlight');

});

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.featured {
  order: 1;
}
.normal {
  order: 2;
}
.wrap div {
  flex-basis: 50%;
  background: #ddd;
  border: 2px solid #000;
}
/*this is the part I need help with, as it should only apply to the first element AFTER applying the "order" attribute*/

.wrap .highlight {
  flex-basis: 100%;
  background: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>wp_query 1 output:</h3>
<div class="wrap">
  <div class="normal">Normal</div>
  <div class="normal">Normal</div>
  <div class="featured">A featured item</div>
  <div class="normal">Normal</div>
  <div class="featured">A featured item</div>
  <div class="normal">Normal</div>
</div>

<h3>wp_query 2 output:</h3>
<div class="wrap">
  <div class="normal">Normal</div>
  <div class="normal">Normal</div>
  <div class="normal">Normal</div>
  <div class="normal">Normal</div>
</div>

If you were to alter the order based on media queries you should apply this code on resize.

Related Articles