web-dev-qa-db-ja.com

リスト項目を持つCSS：evenおよび：odd擬似クラスの使用

リストアイテムにCSS擬似クラスを使用することは可能ですか？

私は以下が交互の色のリストを生成することを期待します、しかし代わりに私は青いアイテムのリストを得ます：

<html>
    <head>
        <style>
            li { color: blue }
            li:odd { color:green }
            li:even { color:red }
        </style>
    </head>
    <body>
        <ul>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
        </ul>
    </body>
</html>
htmlcsscss-selectors
255
Armand

デモ： http://jsfiddle.net/thirtydot/K3TuN/1323/ /

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

ドキュメンテーション：

575
thirtydot

CSSの問題は疑似クラスの構文にあります。

偶数と奇数の疑似クラスは次のようになります。

li:nth-child(even) {
    color:green;
}

そして

li:nth-child(odd) {
    color:red;
}

デモ： http://jsfiddle.net/q76qS/5/ /

42
Kevin Gurney

これを使って：

li { color:blue; }
li:nth-child(odd) { color:green; }
li:nth-child(even) { color:red; }

ブラウザサポートに関する情報はこちらをご覧ください。 http://kimblim.dk/css-tests/selectors/ /

18
Dan S
li:nth-child(1n) { color:green; }
li:nth-child(2n) { color:red; }
<ul>
  <li>list element 1</li>
  <li>list element 2</li>
  <li>list element 3</li>
  <li>list element 4</li>
</ul>

こちらのブラウザサポートを参照してください。 CSS3：nth-​​child（）セレクタ

3
iDaniel88

cSSの奇数と偶数は、IEをサポートしていません。以下の解決策を使用することをお勧めします。

最良の解決策：

li:nth-child(2n+1) { color:green; } // for odd
li:nth-child(2n+2) { color:red; } // for even

li:nth-child(1n) { color:green; }
li:nth-child(2n) { color:red; }

<ul>
  <li>list element 1</li>
  <li>list element 2</li>
  <li>list element 3</li>
  <li>list element 4</li>
</ul>
0
Minh_Bu

しかし、それはIEでは機能しません。使用をお勧めします。nth-child（2n + 1）：nth-​​child（2n + 2）

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>
0
Minh_Bu