css - クラスの最初を除くすべてのセレクター

Question

HTML:

<ul>
    <li></li>
    <li></li>
    <li class="img"></li>        
    <li></li>
    <li class="img"></li>        
    <li class="img"></li>        
    <li></li>
</ul>

CSS:

ul {
 list-style-type: none;   
}

li {
    background-color: red;
    margin: 5px;
    width: 30px;
    height: 30px;
    float: left;
}

li.img:not(:first-child) {
    background-color: blue;
}

結果：

http://jsfiddle.net/benfosterdev/K3ZnA/

最初以外はすべてli.img青色の背景にしたい。

Answer 1

最初の要素を除く:not(:first-child)すべての要素(そうであるかどうかに関係なく) は、実際には親の最初の子ではないため、これを行うことはできません。したがって、そのセレクターは、最初の修飾子がない場合にのみ、最初のものを除外します。li.imgli.imgli.imgli

ただし、一般的な兄弟コンビネータ ~を使用して実行できます。

li.img ~ li.img {
    background-color: blue;
}

li.imgこのセレクターは、他のセレクターの兄弟であるli.imgがドキュメント順でその後にあるもの、つまりli.img最初以外のすべてのセレクターに一致します。

実際の動作を確認し、IE < 9 はこのセレクターをサポートしていないことに注意してください。

Answer 2

他のすべての li.img を選択して異なる backgroundColor を指定する場合:

li.img ~ li.img {
   background-color: blue;
}

Answer 3

おそらく、IE 8（およびそれ以前）の場合のようにJavaScriptを追加するか、上記のJonが言ったようにそのようなブラウザーが〜セレクターをサポートしていない可能性があります。

document.getElementsByClassName("img")[0].style.backgroundColor = "red";