How to target the last child in Flexbox using CSS order property

Question

How to target the last child in Flexbox using CSS order property

Is there a way to correctly detect the last child after rearranging divs using flex order? Even though I have set the order in the CSS, it is still recognizing the last child based on the DOM tree. Since the items are dynamic, we can't rely on nth-child. How can I target the actual last child when they have been reordered with flex order? There may be multiple items that need to appear at the top. I'm looking for a solution using either CSS or JavaScript.

    <div class="mainWrap">
     <div class="item">first</div>
     <div class="item">second</div>
     <div class="item orderFirst">third</div>
     <div class="item">fourth</div>
     <div class="item orderFirst">fifth</div>
     <div class="item">Six</div>
     <div class="item orderFirst">Seven</div>
    </div>

    <style>
    .mainWrap {display:flex; flex-direction: column;}
    .mainWrap .item {order:2; border-bottom:1px solid #ccc}
    .mainWrap .item:last-of-type {border-bottom:none;}
    .mainWrap .item.orderFirst {order:1;}
    </style>

javascript jquery css

Answer 1

Answer №1

To achieve the desired effect of reversing borders, you can implement the following CSS code:

.element {
  order: 2; // double check this value
  border-top: 1px solid #ccc; // apply a top border to all elements with the class .item
}

.item.orderFirst {
  order: 1;
  border-top: none; // remove the top border for the first visually displayed element
}

Assuming your scenario is similar to the provided example, utilizing this solution should fulfill your requirements.

Answer 2

To achieve the desired effect of reversing borders, you can implement the following CSS code:

.element {
  order: 2; // double check this value
  border-top: 1px solid #ccc; // apply a top border to all elements with the class .item
}

.item.orderFirst {
  order: 1;
  border-top: none; // remove the top border for the first visually displayed element
}

Assuming your scenario is similar to the provided example, utilizing this solution should fulfill your requirements.

Answer 3

Answer №2

If you're adamant about approaching it in this manner, one way to achieve the desired result is by utilizing JavaScript to locate the last element that does not carry the orderFirst class and apply styling to it. Nevertheless, this method may be considered as a misuse of the order property.

const container = document.querySelector(".container");

const elements = [...container.children];
const filteredElements = elements.filter((ele) => !ele.classList.contains("orderFirst"));

const lastElement = filteredElements.pop();
lastElement.style.setProperty("border-bottom", "none");

.container {
  display: flex;
  flex-direction: column;
}

.item {
  order: 2;
  border-bottom:1px solid #ccc;
}

.item.orderFirst {
  order: 1;
}

<div class="container">
  <div class="item">first</div>
  <div class="item">second</div>
  <div class="item orderFirst">third</div>
  <div class="item">fourth</div>
  <div class="item orderFirst">fifth</div>
  <div class="item">Six</div>
  <div class="item orderFirst">Seven</div>
</div>

Answer 4

If you're adamant about approaching it in this manner, one way to achieve the desired result is by utilizing JavaScript to locate the last element that does not carry the orderFirst class and apply styling to it. Nevertheless, this method may be considered as a misuse of the order property.

const container = document.querySelector(".container");

const elements = [...container.children];
const filteredElements = elements.filter((ele) => !ele.classList.contains("orderFirst"));

const lastElement = filteredElements.pop();
lastElement.style.setProperty("border-bottom", "none");

.container {
  display: flex;
  flex-direction: column;
}

.item {
  order: 2;
  border-bottom:1px solid #ccc;
}

.item.orderFirst {
  order: 1;
}

<div class="container">
  <div class="item">first</div>
  <div class="item">second</div>
  <div class="item orderFirst">third</div>
  <div class="item">fourth</div>
  <div class="item orderFirst">fifth</div>
  <div class="item">Six</div>
  <div class="item orderFirst">Seven</div>
</div>

Answer 5

Answer №3

Do you intend to remove the border from the last visible item within the mainWrap div container, rather than deleting the last element entirely?

.mainWrap {display:flex; flex-direction: column;}
.mainWrap > div { order:2; border-bottom: 1px solid #ccc }
.mainWrap > div:nth-last-child(2) { border-bottom:none; }
.mainWrap > div:last-child { order:1; background: red;}

<div class="mainWrap">
     <div class="item">first</div>
     <div class="item">second</div>
     <div class="item">third</div>
     <div class="item">fourth</div>
     <div class="item orderFirst">fifth</div>
 </div>

Answer 6

Do you intend to remove the border from the last visible item within the mainWrap div container, rather than deleting the last element entirely?

.mainWrap {display:flex; flex-direction: column;}
.mainWrap > div { order:2; border-bottom: 1px solid #ccc }
.mainWrap > div:nth-last-child(2) { border-bottom:none; }
.mainWrap > div:last-child { order:1; background: red;}

<div class="mainWrap">
     <div class="item">first</div>
     <div class="item">second</div>
     <div class="item">third</div>
     <div class="item">fourth</div>
     <div class="item orderFirst">fifth</div>
 </div>

How to target the last child in Flexbox using CSS order property

Answer №1

Answer №2

Answer №3

Similar questions

JSON is functioning properly, however, I am encountering difficulties trying to make JSONP work

Observing data retrieved via ajax in Internet Explorer 9

Create a function that is determined by a specific hyperlink

Have I got it all wrong with the way Controllers communicate with Services and how I conduct unit testing?

Guide to creating a dynamically populated dropdown menu using jQuery

Sequence of background colors not altering as intended

XState: linking together multiple promises seamlessly without needing intermediate states

Jquery Autocomplete with Dynamic Text Updates

Using Selenium Webdriver to simulate pressing ‘ctrl + t’ for opening a new tab in Javascript

After successfully uploading a file, refresh the file list using AngularJS, DropzoneJS, and JSON

When modifying v-model directly in a Vue instance, the Vuetify component on the screen may not update its displayed value

Images are not being shown on the desktop carousel display

Ensure that the CSS grid has a minimum span of 3 columns, and if a class object is the only item in a grid row, it

What are the best ways to enhance performance when making multiple require() calls?

How to programmatically close a colorbox using an ASP.NET form's Submit button within an iframe

Having trouble storing the message ID within the user Object using Mongoose

How do I get my navbar to change color using a JavaScript scroll function?

codeigniter view is facing issues with ajax functionality

Post request in ExpressJS fails to redirect user after submission

Connecting a CSS file with an HTML document