CSS3 pseudo class not first and last child

Question

I have some following HTML code:

<ul>
    <li>number 1</li>
    <li>number 2</li>
    <li>number 3</li>
    <li>number 4</li>
    <li>number 5</li>
    <li>number 6</li>
    <li>number 7</li>
    <li>number 8</li>
    <li>number 9</li>
    <li>number 10</li>
</ul>

How can I use CSS3 pseudo-classes to make any li element which is not the first or last have a background-color of tomato for example? It seems that I could use the :not selector.

Answer 1

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).