Wie kann ich gerade und ungerade Elemente stylen?

281

Ist es möglich, CSS-Pseudoklassen zu verwenden, um gerade und ungerade Instanzen von Listenelementen auszuwählen?

Ich würde erwarten, dass Folgendes eine Liste alternierender Farben erzeugt, aber stattdessen erhalte ich eine Liste blauer Elemente:

<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>
html css css-selectors Armand
quelle

Antworten:

630

Demo: 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>
Erweitern Sie das Snippet

Dokumentation:

dreißig Punkte
quelle
33
Nur eine Anmerkung vielleicht: Das n-te Kind wird von IE 8 und darunter nicht unterstützt.
MEM
1
Sie können die Selectivzr- Polyfüllung verwenden, wenn Sie auch IE8 ... und IE6 / 7 unterstützen müssen.
Ricardo Zea
2
Gerade bestätigt, dass auch mit Selectivizr :nth-child(odd/even)in IE8 nicht funktioniert.
Ricardo Zea
7
Es stimmt, es funktioniert nicht in IE8, wie hier dokumentiert: caniuse.com/#feat=css-sel3, aber es funktioniert in jedem wichtigen Browser .
Aaron-Codierung
1
Schließlich ist der IE8-Support in diesem Fall kein Grund zur Sorge mehr, da das beabsichtigte Verhalten nur noch "unterstützend" ist. Es hindert den Benutzer nicht daran, die Website zu nutzen oder Informationen zu finden. Es beeinträchtigt nicht einmal (höchstwahrscheinlich nicht) das allgemeine Erscheinungsbild der Website.
Hafenkranich
47

Das Problem mit Ihrem CSS liegt in der Syntax Ihrer Pseudoklassen.

Die geraden und ungeraden Pseudoklassen sollten sein:

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

und

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

Demo: http://jsfiddle.net/q76qS/5/

Kevin Gurney
quelle
3 

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>
Erweitern Sie das Snippet

Siehe Browserunterstützung hier: CSS3: nth-child () Selector

iDaniel88
quelle
1

Das CSS ungerade und gerade unterstützt IE nicht. empfehlen Sie die Verwendung der folgenden Lösung.

Beste Lösung:

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>
Minh_Bu
quelle
0

Unten sehen Sie das Beispiel für die Anwendung von geraden und ungeraden CSS-Farben

<html>
<head>
<style> 
p:nth-child(even) {
    background: red;
}
p:nth-child(odd) {
    background: green;
}
</style>
</head>
<body>

<p>The first Odd.</p>
<p>The second Even.</p>
<p>The third Odd.</p>
<p>The fourth Even.</p>


</body>
</html>
Sheo Dayal Singh
quelle
0

aber es funktioniert nicht im IE. empfehlen die Verwendung von: n-tes Kind (2n + 1): n-tes Kind (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>
Erweitern Sie das Snippet

Minh_Bu
quelle
0

Der Selektor: n-tes Kind (n) entspricht jedem Element, das das n-te Kind des Elternteils ist, unabhängig vom Typ. Ungerade und gerade sind Schlüsselwörter, mit denen untergeordnete Elemente abgeglichen werden können, deren Index ungerade oder gerade ist (der Index des ersten untergeordneten Elements ist 1).

das ist, was du willst:

<html>
    <head>
        <style>
            li { color: blue }<br>
            li:nth-child(even) { color:red }
            li:nth-child(odd) { color:green}
        </style>
    </head>
    <body>
        <ul>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
        </ul>
    </body>
</html>
Agboola Feyikemi
quelle
-5 
 <ul class="names" id="names_list">
          <a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="1">Ashwin Nair</li></a>
           <a href="javascript:void(0);"><span class="badge">2</span><li class="part2" id="2">Anil Reddy</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="3">Chirag</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="4">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="15">Ashwin</li></a>
            <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="16">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">5</span><li class="part1" id="17">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">6</span><li class="part2" id="18">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="19">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">2</span><li class="part2" id="188">Anil Reddy</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="111">Bhavesh</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="122">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="133">Ashwin</li></a>
            <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="144">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">5</span><li class="part1" id="199">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">6</span><li class="part2" id="156">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="174">Ashwin</li></a>

         </ul>    
$(document).ready(function(){
      var a=0;
      var ac;
      var ac2;
        $(".names li").click(function(){
           var b=0;
            if(a==0)
            {
              var accc="#"+ac2;
     if(ac=='part2')
     {
    $(accc).css({

    "background": "#322f28",
    "color":"#fff",
    });
     }
     if(ac=='part1')
     {

      $(accc).css({

      "background": "#3e3b34",
      "color":"#fff",
    });
     }

              $(this).css({
                "background":"#d3b730",
                "color":"#000",
            });
              ac=$(this).attr('class');
              ac2=$(this).attr('id');
    a=1;
            }
            else{

    var accc="#"+ac2;
    //alert(accc);
     if(ac=='part2')
     {
    $(accc).css({

    "background": "#322f28",
    "color":"#fff",
    });
     }
     if(ac=='part1')
     {

      $(accc).css({

      "background": "#3e3b34",
      "color":"#fff",
    });
     }

     a=0;
    ac=$(this).attr('class');
    ac2=$(this).attr('id');
    $(this).css({
                "background":"#d3b730",
                "color":"#000",
            });

            }

        });
Ashwin Vinod Krishnan
quelle
3
Das ist nur ... schrecklich. Es gibt so viele bessere Möglichkeiten, gerade / ungerade Elemente anzuvisieren. Darüber hinaus gibt es keinen Grund, JavaScript wie dieses zu verwenden, wenn zwei Zeilen CSS dasselbe bewirken würden.
Dustin Halstead