I am having a problem with a simple first of type css issue

I have

<div class='test'>
   <div>test 1</div>  
   <div>test 2</div>  

</div>

<div class='test'>
   <div>test 3</div>  
   <div>test 4</div>  
</div>

<div class='test'>
   <div>test 5</div>  
   <div>test 6</div>  
</div>

I want the first test div showing background red and the rest are blue.

I have

.test{
  background-color: blue;
  margin: 15px;
  border-top: dashed 1px grey;
}

.test:first-of-type{
  background-color: red;
  border-top:0;
}

but all my divs are showing blue. Am I doing something wrong here? Thanks for the help!