Jak mogę stylizować parzyste i nieparzyste elementy?

281

Czy można używać pseudoklas CSS do wybierania parzystych i nieparzystych wystąpień elementów listy?

Spodziewałbym się, że poniższe wygeneruje listę naprzemiennych kolorów, ale zamiast tego otrzymam listę niebieskich elementów:

<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
źródło

Odpowiedzi:

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>
Rozwiń fragment kodu

Dokumentacja:

trzydzieści
źródło
33
Może tylko uwaga: n-te dziecko nie jest obsługiwane przez IE 8 i nowsze wersje.
MEM
1
Możesz użyć wieloskładnika Selectivzr, jeśli potrzebujesz również obsługiwać IE8 ... i IE6 / 7.
Ricardo Zea,
2
Właśnie potwierdziłem, że nawet z Selectivizr :nth-child(odd/even)nie działa w IE8.
Ricardo Zea,
7
To prawda, że ​​nie działa w IE8, jak udokumentowano tutaj: caniuse.com/#feat=css-sel3, ale działa na każdej głównej przeglądarce .
kodowanie aaron
1
W końcu obsługa IE8 nie ma się już czym martwić w tym przypadku, ponieważ zamierzone zachowanie jest po prostu „wspierające”. Nie uniemożliwia użytkownikowi korzystania z witryny ani wyszukiwania informacji. Nie psuje to nawet (najprawdopodobniej) ogólnego wyglądu strony.
Hafenkranich,
47

Problem z twoim CSS polega na składni twoich pseudoklas.

Pseudoklasy parzyste i nieparzyste powinny być:

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

i

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

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

Kevin Gurney
źródło
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>
Rozwiń fragment kodu

Zobacz obsługę przeglądarki tutaj: CSS3: Selektor nth-child ()

iDaniel88
źródło
1

css nieparzysty i parzysty nie obsługuje IE. zalecam użycie rozwiązania poniżej.

Najlepsze rozwiązanie:

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
źródło
0

Poniżej znajduje się przykład parzystego i nieparzystego koloru css

<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
źródło
0

ale to nie działa w IE. zalecamy użycie: n-dziecko (2n + 1): n-dziecko (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>
Rozwiń fragment kodu

Minh_Bu
źródło
0

Selektor: nth-child (n) dopasowuje każdy element, który jest n-tym dzieckiem, niezależnie od typu, jego rodzica. Nieparzyste i parzyste to słowa kluczowe, których można użyć do dopasowania elementów potomnych, których indeks jest nieparzysty lub parzysty (indeks pierwszego dziecka to 1).

to jest to, czego chcesz:

<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
źródło
-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
źródło
3
To jest po prostu ... Okropne. Istnieje wiele lepszych sposobów kierowania na parzyste / nieparzyste elementy. Co więcej, nie ma powodu, aby używać JavaScript w ten sposób, gdy dwie linie CSS osiągnęłyby to samo.
Dustin Halstead