Applying background-color to specific box - html

Question

I want to color the 1st, 6th, 7th, 12th, 13th, and 18th boxes. Is there a quick method to do it in CSS
.a {
height: 50px;
width: 50px;
background-color: teal;
display: inline-block;
margin: 5px;
}
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>

Answer 1

The nos. are of the form 6n and 6n+1.
So, add a selector .a:nth-of-type(6n), .a:nth-of-type(6n + 1).
Add background-color: red; to them.
More about :nth-of-type() from W3C:
The :nth-of-type() pseudo-class represents an element that has an+b siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.
Snippet :
.a{
height:50px;
width:50px;
background-color:teal;
display:inline-block;
margin:5px;
}
.a:nth-of-type(6n), .a:nth-of-type(6n + 1){
background-color: red;
}
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div><br />
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>