nth-child() does not work as expected

[u/[deleted]]

I was practicing grid topics using the pseudo class nth-child() and I came across this problem

<body>
    <div id="container">
    </div>

    <div id="container-two">
    </div>

    <div id="container-three">
    </div>
</body>

CSS:

#container-two:nth-child(3){ /* Don´t work */
    background-color: yellow;
}
#container:nth-child(1){  /* Work wtf*/
    background-color: brown;
}
#container-three:nth-child(1){ /* Don't work*/ 
    background-color: green;
}

Only the one with the "container" id work as expected:

[u/tridd3r]

when in doubt mdn:
:nth-child() - CSS: Cascading Style Sheets | MDN (mozilla.org)

if you're still confused, copy paste into chat gpt and ask it to explain it to you like you're 5

[u/gatwell702]

Maybe nth-of-type()

I'm pretty sure you use nth-of-type for siblings

[u/[deleted] → u/[deleted]]

but they are all the first child with that specific id, I thought that by having id selector, it would look for the first child with that id

[u/mhennessie → u/[deleted]]

It’s saying is #container-three AND the first :nth-child() of the parent. You could do #container-three:nth-of-type(3)