Why do nth-of-type elements fail to work at third-element?

I have some question about Css nth-of-type.
In the code below,
nth-of-type(2) and nth-of-type(3) is work ,
but nth-of-type(4) and nth-of-type(5) can't work.

Is there anything wrong in my code?

<div id="insideCircle">
      <div class="outsideNumber"></div>
      <div class="outsideNumber"></div>
      <div class="outsideNumber"></div>
      <div class="outsideNumber"></div>
      <div class="outsideNumber"></div>
<div>

.outsideNumber{
  width: 0px;
  height: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.outsideNumber:nth-of-type(2){
  width: 1px;
  background-color: red;
  transform: translate(-50%,-50%) rotate(30deg);
}
.outsideNumber:nth-of-type(3){
  width: 1px;
  background-color: yellow;
  transform: translate(-50%,-50%) rotate(60deg);
};

.outsideNumber:nth-of-type(4){
  width: 1px;
  background-color: green;
  transform: translate(-50%,-50%) rotate(90deg);
};

.outsideNumber:nth-of-type(5){
  width: 1px;
  background-color: lightblue;
  transform: translate(-50%,-50%) rotate(120deg);
}

When I disable nth-of-type(2) the 3 and 4 element work but 5 not.
It seems like nth-of-type(4) can be select but when it become the third element,it's broken.
I wonder why nth-of-type broken after the third element?

and also I want to know is nth-of-type work on class?
I see some document say it can only select html tag.
If it can't work on class,then why the .outsideNumber:nth-of-type(2) work?

The code is correct only.
you have been given a semi-colon, so you have to remove that's it.

.outsideNumber:nth-of-type(3){	
  width: 1px;	
  background-color: yellow;	
  transform: translate(-50%,-50%) rotate(60deg);	
}
.outsideNumber:nth-of-type(4){	
  width: 1px;	
  background-color: green;	
  transform: translate(-50%,-50%) rotate(90deg);	
}

I hope this worked for you.