title: CSS nth-child doesn't work on dynamically hidden element [AngularJS]
body: <p>I'm trying to implement <strong><em>CSS</em></strong> <code>nth-child</code> on every number of elements. <strong>If a certain number is reached</strong> I want to <strong>hide the first element</strong> and make it reappear if the number reduces again.</p>
  
  <p>The problem is that somehow the <code>nth-child</code> still counts the <strong>hidden element</strong> and thus wrongly implements the styling. Is this a bug or am I doing it wrong?</p>
  
  <p><em>NOTE: The same thing also happens if I use jQuery</em></p>
  
  <p><a href="http://jsfiddle.net/bedex78/uZ5wn/23/" rel="nofollow">http://jsfiddle.net/bedex78/uZ5wn/23/</a></p>
  
  <p><strong>The View:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-app&gt;
      &lt;div ng-controller="TheCtrl"&gt;
  
          &lt;p&gt;Amount to add: &lt;input type="text" ng-model="amount" ng-init="amount=1"&gt;&lt;/p&gt;
  
          &lt;div class='holder'&gt;
              &lt;div ng-class='elements.length &lt; 6 ? "inside" : ""'
                   ng-hide="elements.length &gt;= 6"&gt;
                  &lt;button class='button' ng-click="add(amount)"&gt;Add more&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class='inside' ng-repeat="(k,v) in elements"&gt;
                  {{ $index }} &lt;a href="" ng-click="remove($index)"&gt;Remove&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The JS (AngularJS):</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>function TheCtrl($scope) {
  
      $scope.elements = [{id:1},{id:2}]
  
      $scope.add = function(amount) {
          for (i=0; i &lt; amount; i++){
              $scope.elements.push({id:$scope.elements.length+1});
          }
      };
  
      $scope.remove = function(index) {
          $scope.elements.splice(index, 1);
      };
  
  }
  </code></pre>
  
  <p><strong>The CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.holder {
      width: 300px;
      height: 400px;
      border: 1px solid black;
  }
  .inside {
      height: 30px;
      border: 1px solid black;
  }
  .inside:nth-child(3n+1) {
      background-color: yellow;
  }
  .inside a {
      float: right;
  }
  </code></pre>