CODEWITHSUNDEEP
csssass
adamk22
adamk22

Reputation: 611

Dynamically targeting last rows in CSS grid

So, I used the following CSS to dynamically handle the last rows of an unbalanced grid:

.agenda-event, .agenda-magazine {
  &:nth-of-type(4n+1):nth-last-of-type(-n+4),
  &:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ & {
    .agenda-button {
      border-bottom: 0;
    }
  }
}

Source: http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/

This code is based on a 4 grid column. But for some reason, when there are only 4 items left in the grid (so only 1 row). It discards the border-bottom of the FIRST item but leaves the border bottom of the other three (since it's basically the last row, I need the border-bottoms to stay on 0). What am I doing wrong? Is there something I'm overlooking?

border-bottom only empty on the first item

HTML of the above image: 

<div class="agenda-group-content">
  <div class="agenda-magazine"></div>
  <div class="agenda-event"></div>
  <div class="agenda-event"></div>
  <div class="agenda-event"></div>
</div>

Upvotes: 1

Views: 688

Answers (1)

Harry
Harry

Reputation: 89750

Reason:

There is possibly a compiler version problem which is causing the trouble here. The code given in the question when compiled using the latest version of the compiler at Sassmeister.com or at CodePen gives the below CSS. This CSS would work perfectly fine even when you have only 4 elements.

.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button,
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button {
  border-bottom: 0;
}

But when I compile the same code in Fiddle, I get the below output (taken from Dev Console):

.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button {
  border-bottom: 0;
}

As you would see there are two selectors which are missing from the group. They are as follows:

.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button,

Here the first one is very critical for the below structure because the .agenda-magazine items is the first (and the 4th last item) and all items that follow it as .agenda-event items. So without this, bottom border of the sibling elements which are .agenda-event won't be nullified.

<div class="agenda-group-content">
  <div class="agenda-magazine"></div>
  <div class="agenda-event"></div>
  <div class="agenda-event"></div>
  <div class="agenda-event"></div>
</div>

The following selector will not address the siblings in our case because the first item is not .agenda-event

.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button

and neither would the below one because the sibling elements are not .agenda-magazine.

.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button

Solution:

The most ideal solution would be to upgrade the compiler to the latest version but if that is not possible for whatever reason then it makes more sense to just plug-in the compiled version from Sassmeister or CodePen into the CSS file.

Or alternately, you could avoid manual grouping of selectors and use @extend directive. This method seems to work fine even in Fiddle and so I assume it wouldn't produce any problems even if there is a version mismatch. 

.agenda-event {
  &:nth-of-type(4n+1):nth-last-of-type(-n+4),
  &:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ & {
    .agenda-button {
      border-bottom: 0;
      color: red;
    }
  }
}
.agenda-magazine {
  @extend .agenda-event;
}

Upvotes: 1

Related Questions