289 votes

Utilisation de CSS: pair 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 qui suit pour produire une liste de couleurs en alternance, mais à la place je reçois 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>
 

644voto

thirtydot Points 114021

JSFiddle

 li {
    color: blue;
}
li:nth-child(odd) {
    color: green;
}
li:nth-child(even) {
    color: red;
} 
 <ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul> 

47voto

Kevin Gurney Points 828

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/

18voto

Dan S Points 457

Utilisez ceci:

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

Voir ici pour plus d'informations sur le support du navigateur: http://kimblim.dk/css-tests/selectors/

-3voto

Sukasol Points 1

Pour le rendre un peu plus excitant, voici le damier:

 tr.class:nth-child(even) {background: #EEE}
tr.class:nth-child(odd) {background: #FFF}
 

-7voto

Dallas Points 17

ajouter des classes via Jquery

jQuery ("li: impair"). addClass ("impair"); jQuery ("li: even"). addClass ("pair");

et utilisez css:

.odd {float: left! important;} .even {float: juste! important;}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X