frequent frequent - 1 month ago 6
CSS Question

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

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

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

.example > LI {background: green; }

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