Comment puis-je styliser les éléments pairs et impairs ?

Question

Comment puis-je styliser les éléments pairs et impairs ?

Demandé el 22 de Février, 2011: Quand la question a-t-elle été
122178 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Est-il possible d'utiliser des pseudo-classes CSS pour sélectionner les instances paires et impaires des éléments d'une liste ?

Je m'attendrais à ce que la commande suivante produise une liste de couleurs alternées, mais au lieu de cela, j'obtiens 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>

Demandé el 22 de Février, 2011 par Armand

Answer 1

5 Réponses

Answer 2

822voto

thirtydot Points 114021

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

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
http://caniuse.com/css-sel3 (cela fonctionne presque partout)

Répondu el 22 de Février, 2011 par thirtydot (114021 Points )

33 votes

Une remarque peut-être : nth-child n'est pas supporté par IE 8 et moins.

Commenté el 27 de Septembre, 2012 par MEM

1 votes

Vous pouvez utiliser le Selectivzr polyfill si vous devez prendre en charge IE8... et IE6/7 également.

Commenté el 5 de Avril, 2013 par ricardozea

2 votes

Je viens de confirmer que même avec Selectivizr :nth-child(odd/even) ne fonctionne pas dans IE8.

Commenté el 5 de Avril, 2013 par ricardozea

Afficher 3 autres commentaires

Answer 3

65voto

Kevin Gurney Points 828

Le problème de 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;
}

y

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

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

Répondu el 22 de Février, 2011 par Kevin Gurney (828 Points )

Answer 4

26voto

Dan S Points 457

Utilisez ça :

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

Voir ici pour des informations sur le support des navigateurs : http://kimblim.dk/css-tests/selectors/

Répondu el 22 de Février, 2011 par Dan S (457 Points )

Answer 5

-3voto

Sukasol Points 1

Pour rendre la chose un peu plus excitante, voici le damier :

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

Répondu el 30 de Juin, 2012 par Sukasol (1 Points )

Answer 6

-7voto

Dallas Points 17

Ajouter des classes via Jquery

jQuery("li:odd").addClass("odd") ; jQuery("li:even").addClass("even") ;

et utiliser le css :

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

Répondu el 7 de Juin, 2013 par Dallas (17 Points )

Comment puis-je styliser les éléments pairs et impairs ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment puis-je styliser les éléments pairs et impairs ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: