css :first-visible-child & :last-visible-child

Asked Jan 04 '22 at 08:47

Active Jan 04 '22 at 08:47

Viewed 36 times

i'm making a container with children. I need the first visible child & last visible child have rounded corners.

My approach is using :first-child & :last-child and it works fine. But if one/some children have .hidden, the layout seem broken. So I need a something similar to :first-visible-child & :last-visible-child, of course that selector doesn't exist. I need a trick/hack to archive the similar result.

Note: I cannot apply border-radius on the container with overflow: hidden because the child's box-shadow will be clipped out and the children might have a shake transfom effect and I don't want become clipped out.

Note: a javascript solution are welcome. Maybe using VisibilityObserver()

Here the illustration:

asked Jan 04 '22 at 08:47

Heyyy Marco

You will need JS for this, because of the way CSS selectors work actually doesn't let you achieve what you want: `:first-child.hidden` only selects an element that is BOTH the first child AND has the hidden class, not the first child that has the hidden class. – Terry Jan 04 '22 at 08:49
1

share your code to get answer to your specific case. There is not generic solution – Temani Afif Jan 04 '22 at 08:49
Please share some code to support your question. – kiner_shah Jan 04 '22 at 08:50
it just a flexbox with children. – Heyyy Marco Jan 04 '22 at 09:01
*it just a flexbox with children.* --> so you can easily share it – Temani Afif Jan 04 '22 at 09:06
`:nth-child(0n+1 of :not(.hidden))` => doesn't work – Heyyy Marco Jan 04 '22 at 09:06
here the sandbox you can modify: https://codesandbox.io/s/conditional-border-radius-ewcmd – Heyyy Marco Jan 04 '22 at 09:16

css :first-visible-child & :last-visible-child

0 Answers0