I have a question regarding CSS nth-of-type.
In the following code snippet,
nth-of-type(2) and nth-of-type(3) are functioning properly,
however, nth-of-type(4) and nth-of-type(5) are not working as expected.
Could there be an issue with 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), elements 3 and 4 work but element 5 does not.
It appears that nth-of-type(4) is selectable but when it becomes the third element, it breaks.
I am curious why nth-of-type breaks after the third element?
Additionally, I would like to understand if nth-of-type works on classes.
I have seen some documentation stating it can only select HTML tags.
If it does not work on classes, then why does .outsideNumber:nth-of-type(2) function correctly?