title: nth-child except if it has a class of "hide"
body: <p>I have several item div's with float left so that they appear to be in columns. The user can click on "hide" on any given item, and that adds a ".hide" class to that element, which has display:none css.</p>
  
  <p><strong>Question:</strong> Is there a way to do <code>.item:not(.hide):nth-child(2n+2)</code>?  So that when I have a list of items with one of them having .hide in the middle, the rule still applies and "ignores" that <code>.hide</code> item.</p>
  
  <p>Live example in jsbin, <a href="http://jsbin.com/ajeqal/edit#javascript,html,live" rel="nofollow">http://jsbin.com/ajeqal/edit#javascript,html,live</a></p>
  
  <p>If you click "hide" in a right-hand column item, the columns get out of order in the sense that the left col should always have a different bg color than the right col. I could move the hidden items to the end of the list, but that's more work.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;style&gt;
    .hide { display:none;}
    .item{ float: left; width: 150px; padding: 5px; background: #ccc;}
    .item:not(.hide):nth-child(2n+1) { background: #999; margin-right:5px }
    .item a { display:inline-block; margin-left: 10px; }
    body { width: 325px; }
    #unhideAll { display: none; clear: left; margin-top: 20px;}
    #container { overflow: auto; }
  &lt;/style&gt;
  &lt;body&gt;
    &lt;div id="container"&gt;
    &lt;div class="item"&gt;item&lt;a href="#"&gt;hide&lt;/a&gt;&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;a href="#"&gt;hide&lt;/a&gt;&lt;/div&gt;
    &lt;div class="item hide"&gt;item&lt;a href="#"&gt;hide&lt;/a&gt;&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;a href="#"&gt;hide&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="unhideAll"&gt;&lt;a href="#"&gt;Unhide All&lt;/a&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Js:</p>
  
  <pre><code>$('#unhideAll').click(function(e) {
    e.preventDefault();
    $(".hide").removeClass("hide");
    $(this).hide();
  });
  
  $(".item a").click(function(e) {
    e.preventDefault();
    $(this).parent().addClass("hide");
    $("#unhideAll").show();
  });
  </code></pre>