Why is nested nth-of-type selector not working?

Question

What I need is, the textbox inside the first occurrence of class ".has-error" to be highlighted in red. I tried to nest the :nth-of-type selector as below. It works only when the div with id "name" has the "has-error" class. But I doesn't work in other scenarios. Can someone please explain me the reason why it is not working?

.fields input[type="text"] {
	color: #000;
	border: 1px solid #000;
}
.fields > .error:nth-of-type(1) > .has-error:nth-of-type(1) input[type="text"] {
	color: #f00;
	border-color: #f00;
}

<div class="fields">
	<div class="col error">
		<div id="name" class="input">
			<input type="text" name="name" />
		</div>
		<div id="email" class="input has-error">
			<input type="text" name="email" />
		</div>
	</div>
	<div class="col error">
		<div id="age" class="input has-error">
			<input type="text" name="age" />
		</div>
		<div id="phone" class="input has-error">
			<input type="text" name="phone" />
		</div>
	</div>
</div>

Answer 1

nth-of-type matches only elements and not class names.