how to select all list items except for the first and last using CSS only?

Question

I have an HTML list, from which I need to select all but the first and last element.

Right now I'm trying like this:

.inputList li:not(:first-child):not(:last-child) {
    // stuff
    }

Not really working... is there a better way, that also works on IE?

Thanks for inputs!

Answer 1

You can specify a declaration for all child elements, then override it for first and last children:

.example > LI {background: green; }

.example > LI:first-child,
.example > LI:last-child {background: none; }

Answer 2

Write like this:

.inputList li:first-child, .inputList li:last-child{
  color:red;
}

Note :first-child work till IE7 & above. :last-child work till IE9 & above.