web-dev-qa-db-fra.com

Utilisation de CSS: paires et pseudo-classes impaires avec des éléments de liste

Est-il possible d'utiliser des pseudo-classes CSS sur des éléments de liste?

Je m'attendrais à ce que les éléments suivants produisent une liste de couleurs alternées, mais je reçois plutôt une liste d'éléments bleus:

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

Démo: 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>

Documentation:

565
thirtydot

Le problème avec votre CSS réside dans la syntaxe de vos pseudo-classes.

Les pseudo-classes paires et impaires devraient être:

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

et

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

Démo: http://jsfiddle.net/q76qS/5/

42
Kevin Gurney

Utilisez ceci:

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

Voir ici pour des informations sur le support du navigateur: 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>

Voir support du navigateur ici: CSS3: sélecteur nth-child ()

3
iDaniel88

le css impair et pair n'est pas supporté par IE . 

Meilleure solution:

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

mais cela ne fonctionne pas dans IE . recommande d'utiliser : nième enfant (2n + 1) : nième enfant (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