how to target last-child in a CSS3 column?

Question

I've got a 3 column masonry-style layout:

Here's the (shrunk) CSS, .block elements are inside the div:

div {
  column-count: 3;
  column-gap: 12px;
}

.block
    display: inline-block;
    width: 100%;
}

How can I reference the last element in each column (the blue blocks) in CSS?

Answer 1

This currently isn't possible in pure CSS as it is not possible to target elements relative to the columns. It isn't even possible to target the columns themselves:

It is not possible to set properties/values on column boxes. For example, the background of a certain column box cannot be set and a column box has no concept of padding, margin or borders.

From w3.org: 2. The multi-column model

The spec does also say:

Future specifications may add additional functionality. For example, columns of different widths and different backgrounds may be supported.

However, I have doubts that this particular feature (targeting the last element in a column) will ever be added, because of the fact that elements can span multiple column in some cases.

Answer 2

It's not perfect, but if your blocks are guaranteed to be a similar enough size, you could use something like div:nth-child(3n)