0

I have the following css to get the last four

:nth-last-child(-n+4){border-bottom: none;}

and it returns me this result :

enter image description here

In this, all the last four children don't have the border bottom

but, if the last item is multiple of 3, it comes to the previously row.

enter image description here

What I need is:

  1. when the last item is multiple of 3, select only the last 3enter image description here
  2. when the last item is multiple of 2, select only the last 2enter image description here

Also, this needs to be in pure css. Does anybody know how to achieve this?

Rodrigo Butzke
  • 448
  • 4
  • 15

2 Answers2

1

This will take some pretty convoluted selectors not unlike the ones found here, but it can be done:

:first-child:nth-last-child(4n) ~ :nth-last-child(-n+4),
:first-child:nth-last-child(4n+3) ~ :nth-last-child(-n+3),
:first-child:nth-last-child(4n+2) ~ :nth-last-child(-n+2) {
  border-bottom: none;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

Instead of using border bottom,

i think you should change to border top, it's suitable in your case.

Huy Nguyen
  • 1,931
  • 1
  • 11
  • 11
  • 1
    No it's not - if the bottom borders were changed to top borders, there would be no bottom borders for the second last row of elements that don't have any elements underneath them. – BoltClock Sep 05 '17 at 04:46