Can I style a listview depending on number of contained list items using CSS only?

Question

On my page I have a number of listviews.

Some contain a single list item, some contain more than one item. I'm looking for a way to set top/bottom borders depending on number of list items in a CSS only way.

So in a single item list, borders should be:

listitem > border-top & border-bottom

Two item lists

listitem > border-top
listitem > border-top & border-bottom

Three+ item list

listitem > border-top
listitem > border-top & border-bottom
listitem > border-bottom

Right now I have this CSS

.inputList li:not( .inputList li:first-child, .inputList li:last-child) {
    border-top-width: 1px;
    border-bottom-width: 1px;
    }
.inputList li:first-child {
    border-bottom-width: 1px;
    }
.inputList li:last-child {
    border-top-width: 1px;
    }

But this doesn't take me very far and I'm using not: which I would rather try to avoid (for lack of IE support)

Any idea if this is at all possible?

Thanks!

Your `:not()` syntax is invalid CSS but works in jQuery. See [this question](http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css). — BoltClock, Aug 03 '12 at 10:13
although I'm not sure about support - http://kimblim.dk/css-tests/selectors/, still I trust quirksmode — frequent, Aug 03 '12 at 13:44

score 2 · Accepted Answer · answered Aug 03 '12 at 10:11

2

All you need is

.inputList li:first-child {
   border-top: 1px solid black;
}
.inputList li {
   border-bottom: 1px solid black;
}

with that you will always have a border on top and a border on the bottom and in between.

answered Aug 03 '12 at 10:11

Horen

11,184
11
71
113

Don't you just need one border in between? In your two list example you will have double borders after the first li. Isn't that what you're looking for? http://jsfiddle.net/CBGcE/ – Horen Aug 03 '12 at 10:15
Yes. Exactly. I must be having another style setting false borders. Thanks for help! – frequent Aug 03 '12 at 10:16

Can I style a listview depending on number of contained list items using CSS only?

1 Answers1