Bagaimana saya bisa gaya elemen genap dan ganjil?

281

Apakah mungkin untuk menggunakan pseudo-class CSS untuk memilih item item genap dan genap?

Saya berharap yang berikut ini untuk menghasilkan daftar warna bergantian, tetapi sebaliknya saya mendapatkan daftar item biru:

<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
sumber

Jawaban:

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>
Luaskan cuplikan

Dokumentasi:

tigapuluh
sumber
33
Mungkin sebuah catatan: nth-child tidak didukung oleh IE 8 dan di bawahnya.
MEM
1
Anda dapat menggunakan polyfill Selectivzr jika Anda perlu mendukung IE8 ... dan IE6 / 7 juga.
Ricardo Zea
2
Hanya mengkonfirmasi bahwa bahkan dengan Selectivizr :nth-child(odd/even)tidak berfungsi di IE8.
Ricardo Zea
7
Benar, itu tidak bekerja di IE8 seperti yang didokumentasikan di sini: caniuse.com/#feat=css-sel3 tetapi itu berfungsi pada setiap browser utama .
aaron-coding
1
Bagaimanapun dukungan IE8 tidak perlu dikhawatirkan lagi dalam hal ini karena perilaku yang dimaksud hanya 'mendukung'. Itu tidak mencegah pengguna menggunakan situs atau menemukan informasi. Bahkan tidak (kemungkinan besar tidak) merusak keseluruhan tampilan situs web.
Hafenkranich
47

Masalah dengan CSS Anda terletak pada sintaks kelas pseudo Anda.

Kelas semu dan genap seharusnya:

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

dan

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

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

Kevin Gurney
sumber
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>
Luaskan cuplikan

Lihat dukungan browser di sini: CSS3: nth-child () Selector

iDaniel88
sumber
1

css aneh dan bahkan tidak mendukung untuk IE. merekomendasikan Anda menggunakan solusi di bawah ini.

Solusi terbaik:

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
sumber
0

Di bawah ini adalah contoh warna css genap dan ganjil

<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
sumber
0

tapi itu tidak berfungsi di IE. merekomendasikan menggunakan: nth-child (2n + 1): nth-child (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>
Luaskan cuplikan

Minh_Bu
sumber
0

Selektor: nth-child (n) cocok dengan setiap elemen yang merupakan anak ke-n, apa pun jenisnya, dari induknya. Ganjil dan genap adalah kata kunci yang dapat digunakan untuk mencocokkan elemen anak yang indeksnya ganjil atau genap (indeks anak pertama adalah 1).

ini yang kamu inginkan:

<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
sumber
-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
sumber
3
Ini hanya ... Mengerikan. Ada begitu banyak cara yang lebih baik untuk menargetkan elemen genap / ganjil. Selain itu, tidak ada alasan untuk menggunakan JavaScript seperti ini ketika dua baris CSS akan mencapai hal yang sama.
Dustin Halstead