Apply rules to all nodes in the same level, except the ones in the last row

Question

I know the title of the question is kinda confusing, so I will try to explain better what I want to say.

Let's say that I have a group of elements, like a grid. - This grid can be uneven - This grid can have any number of columns

This is an example of a grid of 3 columns, with 7 elements.

As you see I am drawing a line below some of the elements.

What I would like is to apply these styles to all elements, except the ones on the last row. No matter how many items this may contain.

How can I achieve this?

The markup is really as simple as you can imagine:

<div class="items">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

What I have right now is:

.item:nth-child(n + 4){
    border-top: 1px solid black;
}

Dynamically, no - layout models like flexbox and grid don't provide a mechanism to select specific rows or columns. You would have to know beforehand how many columns you have. There are [questions like this one](https://stackoverflow.com/questions/46308048/how-to-target-a-specific-column-or-row-in-css-grid-layout) that provide more context (and possible workarounds) — chazsolo, Mar 16 '20 at 17:21

Azametzin · Answer 1 · 2020-03-16T17:54:08.573

Since most approaches have already been shown out there, I will leave a hacky solution.

You can use a pseudo-element with position: absolute in the last item that will cover the whole horizontal width in bottom. The position: relative will be in the parent element.

.items {
  position: relative;
}
.item:last-child:before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background-color: #ffffff;
  width: 100%;
}

This will not remove the borders, but hide them. It only works if the background is a solid color.

Apply rules to all nodes in the same level, except the ones in the last row

1 Answers1