CSS3疑似クラスではない最初と最後の子

Question

私はいくつかの次のHTMLコードを持っている：

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

にはどうすればtomatoのbackground-colorを持つ最初または最後ではない任意のli要素を作るためにCSS3の擬似クラスを使用することができます例えば？私は:notセレクタを使うことができたようです。

Answer 1

二つの方法：

あなたは一般的なルールを設定し、:first-childと:last-childアイテムのためにそれを上書きすることができます。それは理解し、維持するために簡単です（ - 2の

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

、私は個人的に最初好む：あなたは2組み合わせる組み合わせ:notキーワードを使用することができ、

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

をまたは：これは、CSSの強みを果たしています私の考えでは）。

Answer 2

は、ここでは、2つの:not()疑似クラス結合する必要がペン http://codepen.io/vendruscolo/pen/AeHtG

です：ここで

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

をだMDN documentation：そこに述べたように、それがうまく上でサポートされている間、それは、IE < 9でサポートされていません他のブラウザ。

IE 8サポートが必要な場合は、Javascriptを使用するか、別のクラスを使用して最後の子要素を示す必要があります。実際、IE 8（およびそれ以下）は疑似クラス:last-childをサポートしていません。