중첩 된 DIV에 대한 얼룩말 같은 CSS 스타일

Question

중첩 수준을 알 수없는 중첩 된 DIV 요소가 있습니다. 나는 각각의 부모가 얼룩말 같은 색깔을 만드는 것보다 다른 배경을 가질 필요가있다. 나는 어두운 색과 흰색의 두 가지 배경만을 사용하고 있습니다. 효과는 컨테이너에있는 홀수와 심지어는 아이들을 스타일링하는 것과 유사해야하지만, 제 경우에는 자식이 중첩됩니다. 나는 다음과 같은 중첩 된 각 요소에 대한 규칙이 작업을 수행 할 수 있습니다

div div div div { 
    background-color: #fff; 
} 

div div div { 
    background-color: #aaa; 
} 

div div { 
    background-color: #fff; 
} 

div { 
    background-color: #aaa; 
} 

그러나 나는 더 우아한 해결책을 찾고 있어요. CSS로만 가능합니까? 자바 스크립트가 필요합니까?

모든 의견을 보내 주시면 감사하겠습니다.

편집 : 나는 그들이 드래그 & 드롭 (자바 스크립트)

Answer 1

으로 재 배열해야하기 때문에, 클래스를 가질 요소를 필요로하지 않습니다 솔루션을 찾고 있어요 UPDATE :이 솔루션은 더 이상 관련이 질문에 대한 업데이 트가 주어진다. 참조를 위해 그것을 여기에서 남겨주세요.

난 그냥 "도"와 "홀수"클래스 (또는 이에 상응하는 뭔가를) 사용하는 것이

다음 HTML에서 다음

div.even { 
    background-color: #fff; 
} 

div.odd { 
    background-color: #aaa; 
} 

을 그리고를 :

<div class="even"> 
    <div class="odd"> 
     <div class="even"> 
      <div class="odd"> 
       ... 
      </div> 
     </div> 
    </div> 
</div>