CSS columns: target last child in each column?

问题

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.

回答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.

回答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).

回答3:

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

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

Fiddle

来源：https://stackoverflow.com/questions/23082368/css-columns-target-last-child-in-each-column

标签

css

css3

multiple-columns