cheeaun, 17 days ago

@scottjenson did a quick codepen https://codepen.io/cheeaun/pen/dyLELpj - came up with .item:not(.hidden) ~ .item:has(+ .item.hidden)

cassidy, 17 days ago

@cheeaun @scottjenson CSS has gotten so wild 😱

scottjenson, 17 days ago

@cassidy @cheeaun @chriskirknielsenw I

I've tried both of your answers and they both work THANK YOU!

Now I just have to figure. out what in hell each of them does!
(I've learned that chatGPT can explain things to me, but I agree with Cassidy, it's starting to get really weird with CSS. That is NOT obvious at all (either to write or to read!)

cheeaun, 17 days ago

@scottjenson @cassidy oh don't use this yet 😂, it doesn't cover all use-cases e.g. if the last item is not hidden.

scottjenson, 17 days ago

@cassidy @cheeaun @chriskirknielsen
I'm going to go with

item:nth-last-child(1 of :not(.hidden))

As it's just a (slight bit) easier to parse. But how in the world ANYONE is supposed to know that :nth-last-child() has an 'of' selector inside of it is beyond me. It's like each selector has it's own little world of nuance...

Of all the documentation I read, none listed "of" as an option.

cheeaun, 17 days ago

@scottjenson @cassidy @chriskirknielsen MDN seems to have it https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child#the_of_selector_syntax

cheeaun, 17 days ago

@scottjenson @cassidy @chriskirknielsen also updated my codepen (https://codepen.io/cheeaun/pen/dyLELpj) to use this, seems to work very well. Seems that full browser support is quite recent (latest 2023-07).

I kinda know the <selector> syntax but avoided and been waiting for full browser support. #TIL

cassidy, 17 days ago

@scottjenson off the top of my head (I'm on mobile so it's harder to test, but I will in a moment!), it would be something like .item:not(.hidden):last-of-type

(Caveats: that might not even work, and there might be better/cleaner/more performant ways to do it!)

scottjenson, 17 days ago

Thanks! But that doesn't seem to work. I created a fiddle here with your sugestion:
https://jsfiddle.net/kheema/vQP8H/

cassidy, 17 days ago

@scottjenson ah yep, I was misreading mdn and thought it would work with classes, but it just selects for the last of a type of element.