CSS Columns: Target Last Child in Each Column

CSS columns: target last child in each column?

I think @Vucko has given the answer which points you to the correct direction but it's really not very dynamic. It's applicable only if you know the number of columns and the fixed number of rows. I would like to add this answer providing another workaround to solve your problem. I have to say that it's just a workaround, it does not use any kind of CSS selector because as I said, the solution given by Vucko seems to be the only most direct one.

The idea here is you can just add some pseudo-element to the ul element, make it stick to the bottom and has the same background with the parent ul so that it can hide the bottom lines. It's a pity that it also hides the vertical lines (the column-rule), if that does not really matter, I think you should choose this solution:

ul {
  ...
  position:relative;
}

ul:after {
  content:'';
  width:100%;
  height:34px;
  position:absolute;
  background-color:inherit;
  bottom:0;
  left:0;
} 

Fiddle for 3 columns. You can change the number of columns without having to change any other.

NOTE: I'm pretty sure that there is no direct solution to your problem (which can select the last item in each column dynamically). Because all the items are laid out as columns but in fact they are just inline items contained by the parent ul.

How to target the last column in a CSS grid?

Such selector exist but we are still far from having a good support for it. You can read:

To be able to represent such implied column-based relationships, the column combinator and the :nth-col() and :nth-last-col() pseudo-classes are defined

For your particular case, a background can do the job:

.grid 
{
  display: grid;
  grid-template-areas: "d b c a";
  grid-template-columns: repeat( 4, 1fr );
  background:
    linear-gradient(90deg,#0000 calc(100% - 1px), #000 0)
    0 50%/calc((100% + 1px)/4) 50% repeat-x
    #F4F4F4;
}

.column.a { 
  grid-area: a; 
}

.column.b { 
  grid-area: b; 
}

.column.c { 
  grid-area: c; 
}

.column.d { 
  grid-area: d; 
}

/* Flavor */
.grid 
{
  margin: 20px auto;
  max-width: 600px;
  padding: 20px;
}

.column { 
  width: 100%; 
  text-align: center;
}

<div class="grid">
  <div class="column a">A</div>
  <div class="column b">B</div>
  <div class="column c">C</div>
  <div class="column d">D</div>
</div>

Targeting the last child in 8 column grid

You also need to ensure you're only selecting the last col-md-6 element.

.someGroup .col-md-6:last-child .item:last-child {}

Demo: http://jsfiddle.net/w83qwtx0/

How to target a specific column or row in CSS Grid Layout?

Not possible with CSS.

CSS targets HTML elements, attributes and attribute values.

Grid columns and rows have none of these "hooks".

You'll have to target the grid items directly.

You wrote:

For example, say I have a 3 row by 2 column CSS Grid Layout: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. How would I select all elements from the 2nd column?

grid-container {  display: grid;  grid-template-columns: 1fr 1fr;  grid-template-rows: 1fr 1fr 1fr;  grid-gap: 10px;  padding: 10px;  height: 50vh;  background-color: gray;}
grid-item {  background-color: lightgreen;}
grid-item:nth-child(2n) {  border: 2px dashed red;}

<grid-container>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item></grid-container>

CSS: How to style last grid row of a dynamic number of items?

If you will always have 3 columns keep the template row auto and define the height on the elements. All should have 70px except the first 3 and the last 3 under certain conditions.

.cont {
  background: grey;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 3px;
  margin:10px;
}
.cont div {
  background: red;
  height:70px;
}

.cont div:nth-child(1), /* 1st */
.cont div:nth-child(2), /* 2nd */
.cont div:nth-child(3), /* 3rd */
.cont div:nth-last-child(1), /* last one */
.cont div:nth-last-child(2):not(:nth-child(3n + 3)), /* before the last if not the last one of a row*/
.cont div:nth-last-child(3):nth-child(3n + 1){ /* before the two last only if the fisrt one of a row*/
  height:22px;
}

<div class="cont">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="cont">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="cont">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Targeting nth column (made by column-count)

As of now, there is no way to target nth column with pure css.

---

Related Topics