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.