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

Question

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?

Answer 1

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.