Is there any way to add css to the first instance of element by its class?

Question

Im trying to add css to a specific element by its class, but only the the first instance of it. I tried using first-type-of, nth-type-of, didn't get the result I was expecting.

<style>
.test:first-of-type {
    color:red;
}
</style>

<div class='parent'>
 <div>
   <div class='bblalba'></div>
   <div class='test'>Hello1</div>
   <div class='test'>Hello2</div>
 </div>
<div>

Lets suppose for example I want the Hello1 text to be red.