select only child
Hey, the image below is a representation of some grid items that are part of a grid using
auto-fill so the items wrap if there's not enough space to fit it. Is there a way to test for an item being by itself, like the fourth item in the image? Thanks in advance.
10 Replies
You could do something with nth-child
the grid is a utility class so there could be any number of children, is there not one way to test for it in every scenario? preferably so i don't have to create lots of different class names just to target the 4th child in one and the 6th in another etc.
no
Not without JS faik
you'd have to loop over with JS and get the offsetTop or something
ah dang that's annoying, thank you guys
If you want to select the 4th div, or 6th div using only CSS you can use
:nth-child(4 of .box)
In this example, I can select the .box I want only to change the number of the nth-child, and apply the CSS property you want:
https://codepen.io/giancarlosgza/pen/PovoYrPAssuming you always have 3 columns and you only want to get the first element of the row when it is the only element in that row you could try this:
I know you would like to do it with css, but if you do consider to use a bit of JS, you could check for each item if the offsetTop is larger than the previous one and add a data attribute to style it in css
--edit: removed pen
