How to properly use nth-child css selector [duplicate] - html

Question

This question already has answers here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
nth-of-type vs nth-child
(7 answers)
Closed 10 months ago.
I am trying to implement some css with nth child selector and unfortunately it's not working.
div.abc input:nth-child(3)
{
background: red;
color: red;
border: 1px solid red;
}
<div class="abc">
<p>This is some text.</p>
<div class="bc">
<input type="text"/>
</div>
<div class="bc">
<input type="text"/>
</div>
<div class="bc">
<input type="text"/>
</div>
<div class="bc">
<input type="text"/>
</div>
</div>

Answer 1

If you want the third input:
.abc div:nth-child(4) input
/* OR */
.abc div:nth-of-type(3) input
nth-child will seek all direct descendant tags so that would be:
<p> -> <div> -> <div> -> <div>
nth-of-type will seek all direct descendants of a specific type:
<div> -> <div> -> <div>
.abc div:nth-child(4) input {
color: gold;
}
.abc div:nth-of-type(3) input {
background: red;
border: 1px solid red;
}
<div class="abc">
<p>This is some text.</p>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" value='TEST'/>
</div>
<div class="bc">
<input type="text" />
</div>
</div>

Answer 2

Your input tags are not siblings. They are wrapped in divs, so you need to select the nth-child of a div element and get the input inside that div.
.abc > div:nth-child(4) > input{
background: red;
color: yellow;
border: 1px solid red;
}
<div class="abc">
<p>This is some text.</p>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
</div>

Answer 3

What your code is doing is not valid. nth-of-child is a selector for direct children of the parent container - in this case abc - and this parent element does not have any direct input-elements as children.
Instead, you need to target the bc-elements, as they are direct children of the the parent element abc, and then target the input.
In this example, I used nth-of-type. They are similiar, but nth-of-type targets DOM-elements directly, which are divs in this example.
div.abc .bc:nth-of-type(3) input {
background: red;
color: red;
border: 1px solid red;
}
<div class="abc">
<p>This is some text.</p>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
</div>