Focusing on the initial element following CSS prioritization

Question

Focusing on the initial element following CSS prioritization

Check out this codepen link: http://codepen.io/muji/pen/XpEYzO

I am looking to target the first element after it has been sorted using a CSS "order" property and apply another CSS property to it.

Is there a way to use jQuery or any other method to identify the first element after sorting, and then add a class or make changes to it? Thank you for your assistance.

.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>

javascript jquery css

Answer 1

Answer №1

There doesn't seem to be a specific CSS selector for selecting the "first in order" element, which would be quite useful as the order property is becoming more popular. Therefore, a script-based solution may be necessary.

If rearranging the elements works for your needs, that can easily be done. Here's a simple example:

// Function to determine priority of an element (lower number = higher priority)
function getPriority($el) {
  return $el.hasClass("featured") ? 0 : $el.hasClass("normal") ? 1 : 2;
}
// For each .wrap container...
$(".wrap").each(function() {
  var $this = $(this);
  
  // Get an array of its child elements
  var a = $this.children().get();
  
  // Sort the array based on priority
  a.sort(function(a, b) {
    return getPriority($(a)) - getPriority($(b));
  });
  
  // Append the sorted elements back to the parent
  $this.append(a);
});

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

/* Style the first div differently */
.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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

There doesn't seem to be a specific CSS selector for selecting the "first in order" element, which would be quite useful as the order property is becoming more popular. Therefore, a script-based solution may be necessary.

If rearranging the elements works for your needs, that can easily be done. Here's a simple example:

// Function to determine priority of an element (lower number = higher priority)
function getPriority($el) {
  return $el.hasClass("featured") ? 0 : $el.hasClass("normal") ? 1 : 2;
}
// For each .wrap container...
$(".wrap").each(function() {
  var $this = $(this);
  
  // Get an array of its child elements
  var a = $this.children().get();
  
  // Sort the array based on priority
  a.sort(function(a, b) {
    return getPriority($(a)) - getPriority($(b));
  });
  
  // Append the sorted elements back to the parent
  $this.append(a);
});

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

/* Style the first div differently */
.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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Answer №2

To achieve the desired effect, you can utilize jQuery to sort inner divs based on their position and then apply styling to the first one.

$('.wrap').each(function() {
  var sort = $(this).find('div').sort(function(a, b) {
    return $(a).position().top - $(b).position().top
  })
  $(sort[0]).addClass('first')
})

.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;
}
div.first {
  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>

Answer 4

To achieve the desired effect, you can utilize jQuery to sort inner divs based on their position and then apply styling to the first one.

$('.wrap').each(function() {
  var sort = $(this).find('div').sort(function(a, b) {
    return $(a).position().top - $(b).position().top
  })
  $(sort[0]).addClass('first')
})

.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;
}
div.first {
  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>

Answer 5

Answer №3

A different approach from the top position suggested by @Nenad Vracar would be to filter the elements with the lowest order in each group and emphasize the first one (based on 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 modify the order based on media queries, you would need to implement this code on resize.

Answer 6

A different approach from the top position suggested by @Nenad Vracar would be to filter the elements with the lowest order in each group and emphasize the first one (based on 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 modify the order based on media queries, you would need to implement this code on resize.

Focusing on the initial element following CSS prioritization

Answer №1

Answer №2

Answer №3

Similar questions

Automatically populating fields in Laravel 8 after selecting a value from a dropdown menu

The error message that appeared states: "TypeError Object[object object] does not have the SubSelf method, TypeError Object[object object] does not

Extract data from axios and display it in a Vue template

The radio buttons are stuck and not changing their selection

Retrieve data using AJAX and dynamically show it on an element using CodeIgniter

Discover the process of utilizing doc.getElementbyClassName to determine if any of its elements are blank

Having trouble with CSS webkit radial not working on iPad's Safari Mobile browser?

Struggling to Add angular-websocket to a MeanJS v0.4.1 Application: Dealing with an 'Unknown Provider' Error

What is the best way to create a function library that works seamlessly across all of my Vue.js components?

Requirements for adding information to a database table

"The issue of the search form CSS class loading twice and causing placement issues following the completion of the AJAX

Reorganize array of objects in JavaScript

The console displays "undefined" when formatting API data

Guide to utilizing jQuery for setting values in all subsequent rows of a table

Making an API request using jQuery

The CSS content spills beyond the edge of the screen

The issue of the Dropdown Menu Not Remaining Fixed While Scrolling

The HTML button fails to respond when clicked

Having trouble resolving errors in Visual Studio Code after failing to properly close a parent function? Learn how to fix this issue

Proper alignment of content in HTML using Bootstrap following the integration of .json data