How to target last flex item

Question

I have a list of divs that can be either display:none or display:flex dynamically depending on a few conditions.

How do I check, since this is dynamic, what is the last div showing display flex?

My code is something like this:

<div class="container">
  <div style="display: flex"></div>
  <div style="display: none"></div>
  <div style="display: flex"></div>
   <div style="display: none"></div>
</div>

As I say, the children might or might not be display:flex and might not necessarily be in this order or might be more items than this or not. I need to identify the last item with display:flex so I apply a borderBottom with javascript.

Why not use a class name to control both visibility _and_ to let you select the elements? — Dai, May 24 '22 at 09:00
If applying the border to the container is not a suitable solution, then you need Javascript for this. What have you tried so far? — , May 24 '22 at 09:02
Does this answer your question? [A CSS selector to get last visible div](https://stackoverflow.com/questions/5275098/a-css-selector-to-get-last-visible-div) — , May 24 '22 at 09:03
you need JavaScript first get all the elements inside it and then check if it has flex and as you said it changes when it does re-run the function — net-js, May 24 '22 at 09:05

0stone0 · Answer 1 · 2022-05-24T09:14:56.163

1

I need to identify the last item with display:flex so I apply a borderBottom with javascript.

Since you have js available, consider using a CSS selector targeting the display: flex:

div[style="display: flex"]

Then get the last item in the array (eg: using pop()), thats the items you're looking for.

Pure css this won't be possible.

const e = [ ...document.querySelectorAll('div[style="display: flex"]') ].pop();
e.style.border = '1px solid red';

<div class="container">
  <div style="display: flex">a</div>
  <div style="display: none">b</div>
  <div style="display: flex">c</div>
   <div style="display: none">d</div>
</div>

edited May 24 '22 at 09:14

answered May 24 '22 at 09:07

0stone0

34,288
4
39
64

This is a horrible idea. Use classes instead. – Jonathan May 24 '22 at 09:16
OP is clearly suffering from X/Y problem. Using JS to apply border bottom on the last flex item is not the way to go. – Jonathan May 24 '22 at 09:19

score 0 · Answer 2 · answered May 24 '22 at 09:15

change your styles to a class

<div class="container">
  <div class="flex">a</div>
  <div class="none">b</div>
  <div class="flex">c</div>
</div>

A function to get it by class name

function le(){
const container = document.querySelector(".container")
const elements = container.getElementsByClassName("flex")
return elements.item((elements.length - 1))
}
console.log(le())

and some csss

.flex {
  display: flex
}

.none {
  display: none
}

score 0 · Answer 3 · answered May 24 '22 at 09:18

this is a simplest solution

$(".container").each(function() {
    $('div:visible:last', this).css("background","red");
});

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
  <div style="display: flex">1</div>
  <div style="display: none">2</div>
  <div style="display: flex">3</div>
  <div style="display: none">4</div>
</div>
</body>
</html>

How to target last flex item

3 Answers3