title: CSS and Twitted Bootstrap - Even and Odd Elements
body: <p>I'm developing a, somewhat complicated, sidebar menu which is based on newest Twitter Bootstrap 3 <code>Accordion</code>. The menu has items which contains submenu with items too, and I wanted to color item background differently for even and odd elements.</p>
  
  <p>You can see my example here: <a href="http://jsfiddle.net/dzorz/qZZ3r/" rel="nofollow">http://jsfiddle.net/dzorz/qZZ3r/</a></p>
  
  <p>I've managed to color even and odd element od accordion/panel with this css part:</p>
  
  <pre><code>.panel-default:nth-of-type(odd) .panel-heading{
  background: #ffffff !important;
  }
  
  .panel-default:nth-of-type(even) .panel-heading{
  
  background: #5bc0de !important;
  
  }
  </code></pre>
  
  <p>And everything works great on 1st level of items and 2nd level of items which are located inside of <code>first(odd) item</code> ("Dr. Hans von Rosenheim "), but 2nd level of items that are located inside of first level <code>second(even) item</code> ("Hans von Rosenheim") are all coloured in blue like they are all <strong>even</strong> items.</p>
  
  <p>Now My question is why this css works good in first case of submenus and on second case of submenus it does not works in the same way and how could it be solved?</p>
  
  <p>You can check it out and edit in my jsfiddle linked above.</p>
  
  <p>P.s. <em>I did not pasted all the code because its very long, just the key part of css. You can check all code together in <a href="http://jsfiddle.net/dzorz/qZZ3r/" rel="nofollow">jsfiddle</a></em></p>