nth-child selecting extra elements

Question

I have the following HTML:

<html>
    <body>
        <div id="parent">
            <div>
                <div>A</div>
                <div>A</div>
                <div>A</div>
            </div>
            <div>
                <div>A</div>
                <div>A</div>
                <div>A</div>
            </div>
            <div>
                <div>A</div>
                <div>A</div>
                <div>A</div>
            </div>
        </div>
    </body>
</html>

and the following CSS:

#parent div:nth-child(2) {
  background-color: blue;
}

I was expecting the fourth, fifth, and sixth "A"s to be blue since I was trying to target only the second child of the element with ID parent, however, the second and eighth were also made blue. Why is this and how do I fix it?

Here is an image of my result: https://i.stack.imgur.com/FEB4N.png

And here is an image of my expected result: https://i.stack.imgur.com/MVrCn.png

Christian Carrillo · Answer 1 · 2019-08-31T19:26:56.420

Your css code is targeting all secound childs of div's inside of #parent. You need to target only direct childs of #parent using the > selector:

#parent > div:nth-child(2) {
  background-color: blue;
}

<div id="parent">
    <div>
        <div>A</div>
        <div>A</div>
        <div>A</div>
    </div>
    <div>
        <div>A</div>
        <div>A</div>
        <div>A</div>
    </div>
    <div>
        <div>A</div>
        <div>A</div>
        <div>A</div>
    </div>
</div>

score 0 · Answer 2 · answered Aug 31 '19 at 19:20

Try this:

#parent > div:nth-child(2) {
  background-color: blue;
}

You see the second and eighth div blue because they are also "the second" children of #parent (relative to their parent div). Using '>' in CSS selector applies your style only to straight children div of #parent.

nth-child selecting extra elements

2 Answers2