I have a bunch of nth-child selectors. e.g. `nth-child(1n)`, `nth-child(2n)`, etc.

Ideally I would like these to essentially "reset" once `5n` is reached so the 6th child would receive the `1n` styles.

Instead, the 6th child inherits the `2n` styles which override the `1n` styles... :^(

Anyone know any fancy nth-child selector footwork for getting these rules to essentially reset every 5th element?

HTML:

```
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
  <div>25</div>
  <div>26</div>
  <div>27</div>
  <div>28</div>
  <div>29</div>
  <div>30</div>
</div>

```

CSS:

```
* {
  box-sizing: border-box;
}
.grid > * {
  float: left;
  margin-right: 30px;
  background: tomato;
  margin-bottom: 10px;
  padding: 10px;
}
.grid > *:nth-child(1n) {
  width: 60px;
}
.grid > *:nth-child(2n) {
  width: 60px;
}
.grid > *:nth-child(3n) {
  width: calc( (100% * 0.333333333333333) - ((30px * (2 + 1)) - 30px * 0.333333333333333) );
}
.grid > *:nth-child(4n) {
  width: calc( (100% * 0.333333333333333) - ((30px * (2 + 1)) - 30px * 0.333333333333333) );
}
.grid > *:nth-child(5n) {
  width: calc( (100% * 0.333333333333333) - ((30px * (2 + 1)) - 30px * 0.333333333333333) );
}
.grid > *:nth-child(5n) {
  margin-right: 0;
}

```

Ideally all the blocks would line up like the top row: <http://codepen.io/corysimmons/pen/XXzJOm?editors=110>