Html – Is it possible to target the first and last displayed element of a reordered flexbox?

If your elements are static you can add a class to each one: item-1, item-2, .., item-n. If your elements are dynamically created you can add the class as they are being created.

Making sure that the class name has the same prefix every time and is unique to the elements that are being reordered, you can utilize the querySelectorAll method to select them, based on their prefix. For example:

const elements = document.querySelectorAll(`[class^="item-"]`);

The above selector allows you to select all the elements the class of which starts with the string "item-". Once the elements have been selected, if they are being dynamically created, you can define a new variable to extract the number of elements contained within the selector, the value of which is practically the last element you are looking for. For example:

const lastElement = elements.length;

Then you can iterate through the elements that were returned by the selector and target the first and last element. For example:

elements.forEach(element => {
  if (element.classList.contains("item-1") ||
    element.classList.contains(`item-${lastElement}`)) {
    // do something with the first or last element
    console.log(element);
  }
});

Alternatively, you can directly iterate through your selector’s elements using only the loop’s index:

elements.forEach((element, index) => {
  if (index === 0 || index === elements.length - 1) {
    // do something with the first or last element
    console.log(element);
  }
});

Either way would work. Finding a way to query the DOM for the elements that are being reordered, then iterating through the list to target the desired elements will most likely do what you are after. Let me know.

UPDATE: Based on what you shared, I am updating the iteration in the lines below to help you get what you are after.

// assuming the item className is unique to those elements only
const elements = document.querySelectorAll(".item");

elements.forEach((element, index) => {
  // the following statement checks for both the first and last elements
  if (index === 0 || index === elements.length - 1) {
    // the following statement only targets the elements that do not contain the .to-back class
    if (!element.classList.contains(".to-back")) {
      element.style.borderRight = "none;";
    }

    // the following statement only targets the elements that contain the .to-back class
    if (element.classList.contains(".to-back")) {
      element.style.borderRight = "none;";
    }
  }
});

You can alter the initial if statement within the forEach loop to individually check for the first and last elements by breaking the statement into two separate statements. I can see that someone already posted an answer utilizing css rules. That would also work.