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>

Griffith · Accepted Answer · 2015-10-29 11:51:43Z

5

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

answered Oct 29, 2015 at 11:51

Griffith

3,2171 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Balaji Viswanath Over a year ago

My Bad. Looks like i dint read the CSS3 spec correctly. Thank you for spotting it.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related