CSS3 pseudo class not first and last child

Two ways :

you can set a generic rule, and then override it for :first-child and :last-child items. This plays to CSS strengths:

 li { background: red; }
 li:first-child, li:last-child { background: white; }

Or, you can use the :not keyword combined combining the two:

li { background: white; }
li:not(:first-child):not(:last-child) { background: red; }

Of the two, I personally prefer the first - it's easier to comprehend and maintain (in my opinion).


Here's a pen http://codepen.io/vendruscolo/pen/AeHtG

You have to combine two :not() pseudo classes:

li:not(:first-child):not(:last-child) {
  background: red;
}

Here's the MDN documentation: as stated there, it's not supported on IE < 9, while it's well supported on other browsers.

If you need IE 8 support, you have to rely on Javascript or use another class to indicate which element is the last child. In fact, IE 8 (and lower) doesn't support the :last-child pseudo class.