짝수 및 홀수 요소의 스타일을 어떻게 지정할 수 있습니까?

281

CSS 의사 클래스를 사용하여 짝수 및 홀수 목록 항목 인스턴스를 선택할 수 있습니까?

다음은 대체 색상 목록을 생성하지만 파란색 항목 목록을 얻습니다.

<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 
— 아르망
소스

답변:

630

데모 : 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>
스 니펫 확장

선적 서류 비치:

— 서른 점
소스
33
아마도 참고 사항 : nth-child는 IE 8 이하에서 지원되지 않습니다.
— MEM
1
IE8 ... 및 IE6 / 7도 지원해야하는 경우 Selectivzr 폴리 필을 사용할 수 있습니다 .
— Ricardo Zea
2
:nth-child(odd/even)IE8에서는 Selectivizr를 사용해도 작동하지 않는다는 것을 확인했습니다 .
— Ricardo Zea
7
사실, caniuse.com/#feat=css-sel3에 설명 된대로 IE8 에서는 작동하지 않지만 작동합니다. 모든 주요 브라우저 합니다 .
— aaron-coding
1
모든 IE8 지원은 의도 된 동작이 단지 '지원 적'이므로이 경우 더 이상 걱정할 것이 없습니다. 사용자가 사이트를 사용하거나 정보를 찾는 것을 막지 않습니다. 웹 사이트의 전체 모양을 망칠 수도 없습니다.
— 하펜 크라 니치
47

CSS의 문제는 의사 클래스의 구문에 있습니다.

짝수 및 홀수 의사 클래스는 다음과 같아야합니다.

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

과

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

데모 : http://jsfiddle.net/q76qS/5/

— 케빈 거니
소스
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>
스 니펫 확장

여기에서 브라우저 지원을 참조하십시오 : CSS3 : nth-child () Selector

— iDaniel88
소스
1

CSS가 이상하고 심지어 IE를 지원하지 않습니다. 아래 솔루션을 사용하는 것이 좋습니다.

최고의 솔루션 :

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
소스
0

다음은 짝수 및 홀수 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
소스
0

하지만 IE에서는 작동하지 않습니다. : 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>
스 니펫 확장

— Minh_Bu
소스
0

: nth-child (n) 선택기는 유형에 관계없이 부모의 n 번째 자식 인 모든 요소와 일치합니다. 홀수 및 짝수는 인덱스가 홀수이거나 짝수 인 하위 요소를 일치시키는 데 사용할 수있는 키워드입니다 (첫 번째 하위의 인덱스는 1).

이것은 당신이 원하는 것입니다 :

<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>
— 아그 볼라 페이 케미
소스
-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",
            });

            }

        });
— 애쉬 윈 비 노드 크리슈 난
소스
3
이건 그냥 ... 끔찍 해요 짝수 / 홀수 요소를 타겟팅하는 더 좋은 방법이 많이 있습니다. 또한 두 줄의 CSS가 동일한 결과를 얻을 때 이와 같이 JavaScript를 사용할 이유가 없습니다.
— Dustin Halstead
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.