<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   a {
  color: #455a64;
  cursor: pointer;
}
ul {
  padding: 0;
  margin: 0;
}
ul li {
  box-sizing: border-box;
  padding: 0.5% 1%;
  margin: 1% 1% 1% 0;
  float: left;
  background-color: #b0bec5;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
input:focus {
  border-bottom: 1px solid #78909c !important;
  box-shadow: 0 1px 0 0 #78909c !important;
}
  </style>
 </head>
 <body translate="no">
  <body class="blue-grey lighten-5" ng-app="nthChildTest">
   <div class="container" ng-controller="MainCtrl">
    <div class="row">
     <div class="col s12">
      <h1>
       :nth-child(test)
       <a class="tooltipped" data-delay="50" data-position="bottom" data-tooltip="This is a small tool built with AngularJs and Materialize. Just type your nth-child() expression to test against nth-child(expression) behavior. Hope it helps.">
        <i class="material-icons">
         info_outline
        </i>
       </a>
      </h1>
     </div>
    </div>
    <div class="row">
     <div class="col s4 input-field">
      <label>
       nth-child(expression)
      </label>
      <input ng-model="expression" type="text"/>
     </div>
     <div class="col s4 input-field">
      <label>
       n. of items
      </label>
      <input min="1" ng-model="items" type="number"/>
     </div>
     <div class="col s4 input-field">
      <label>
       columns
      </label>
      <input max="50" min="1" ng-model="columns" type="number"/>
     </div>
    </div>
    <div class="row">
     <div class="col s12">
      <style>
       li { 
            width: {{(100/columns)-1}}%; 
          } 
          li:nth-child({{expression}}) { 
            background-color: #455a64!important; 
            color: #fff!important;
            opacity:.8;
            -webkit-box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
               -moz-box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
                -ms-box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
                 -o-box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
                    box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
            -webkit-transform: translateY(-5%) scale(1.5);
               -moz-transform: translateY(-5%) scale(1.5);
                -ms-transform: translateY(-5%) scale(1.5);
                 -o-transform: translateY(-5%) scale(1.5);
                    transform: translateY(-5%) scale(1.5);            
          } 
          li:nth-child({{columns}}n+{{columns}}) { 
            margin-right: 0; 
            width: {{(100/columns)}}%; 
          } 
          li:nth-child({{columns}}n+1) { 
            clear: left; 
          }
      </style>
      <ul>
       <li class="z-depth-1" ng-repeat="i in gn(items) track by $index">
        <span>
         item {{$index+1}}
        </span>
       </li>
      </ul>
     </div>
    </div>
    <div class="row">
     <div class="col s6">
      built with
      <a href="https://angularjs.org/" target="_blank">
       AngularJs v1.5.5
      </a>
      and
      <a href="http://materializecss.com/" target="_blank">
       Materialize v0.97.6
      </a>
     </div>
     <div class="col s6 right-align">
      :nth-child(test) v.1.0 | created by
      <a href="http://www.federicoportoghese.it" target="_blank">
       Federico Portoghese
      </a>
     </div>
    </div>
   </div>
  </body>
 </body>
</html>
