I have this very simple example that should highlight the text red but it doesn’t work. However the same exact thing with :last-of-type correctly highlights the last row red. I am not sure why the first-of-type selector is not working unless I make it the first child of parentTwo.
.parentOne .parentTwo .thirdNested:first-of-type {
color:red
}
.parentOne .parentTwo .thirdNested:last-of-type {
color:blue
}<div class="parentOne">
<div class="parentTwo">
<div class="firstNested">
<span>Some text here</span>
</div>
<div class="secondNested">
<span>Some text here</span>
</div>
<div class="thirdNested">
<span>This should be red with :first-of-type</span>
</div>
<div class="thirdNested">
<span>This should be blue with :last-of-type</span>
</div>
</div>
</div>2