___________ every 4th element
| ________ starting point seccond
| |
.group:nth-child(4n+2) article {
background-color: blue;
}
___________ every 4th element
| ________ starting point third
| |
.group:nth-child(4n+3) article {
background-color: green;
}
.group {
width: 300px;
float: left;
margin: 0 20px 20px 0;
}
article {
width: 150px;
height: 150px;
background-color: #666;
float: left;
}
article.feature {
width: 300px;
height: 300px;
}
.group:nth-child(4n+2) article {
background-color: blue;
}
.group:nth-child(4n+3) article {
background-color: green;
}
<div class="group">
<article class="feature">
<h1>Block 1</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 2</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 3</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 4</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 5</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 6</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 7</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 8</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 9</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 10</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 11</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 12</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 13</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 14</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 15</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 16</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 17</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 18</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>