CSS columns: target last child in each column?

Question

I have a grid of headlines in newspaper format using CSS3 column count.

http://jsfiddle.net/L6TTJ/

HTML:

<ul>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <!-- ... etc ... -->
</ul>

CSS (vendor prefixes and non-pertinent rules omitted for brevity):

ul {
    column-count: 3;
    column-rule: 1px solid #ccc;
}
li { border-bottom: solid 1px #ccc; }

You can see where this is going: is there any means in CSS to target the last li element in each column so I can remove the bottom border?

I found this question, but there's no answer.

Rule

I can't think of any reasonable answer, as you could even end up with the "column break" amidst a <li> tag, such that there would be no border at the bottom to remove in first place. Anyway, I'm not sure if css columns are the right way to go for this case. – Benzo

I agree with @patrickj. I don't think this can be solved with plain css if it has to work in all the cases. Neither nth-child nor nth-last-child could do the trick for what you're asking, and I doubt there's any other selectors which could allow for this. – Roland

Answer 1

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.

Pyotr

Thanks for this. Although, as you say, there is no direct solution (I didn't expect there would be), it's inventive enough for me to accept it as a viable solution. I'll get playing with it. – Rule

Answer 2

For separator lines and such you can add lines to the top of the items instead of to the bottom.

This way you can always hide the first lines in each column because they are in the same vertical position (using a pseudo element to cover it).

Consultative

Answer 3

li:nth-child(2n) { border-bottom: none; }

li:nth-child(2n)
{
    border-bottom: none;
}

Fiddle

Aegeus

Thanks, but this will work only when there are two items in each column. If I could be sure of the number of elements in each column, I wouldn't need to use CSS columns. – Rule