Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript One Solution

Posted by Joseph Tavinor
Joseph Tavinor
8,397 Points

Why does nth-of-type not work?

const container = document.querySelector('.container:nth-of-type(2)');
container.style.backgroundColor = "royalblue";

This was my code for question 5: Select only the second element with the class '.container'.

When I have nth-of-type(1), the first element with class container gets selected as expected, but when I have nth-of-type(2), the second element with class container gets skipped and the third element is the one that gets selected.

Why is the second element getting skipped? I could see no syntax errors in the index.html file.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Make a snapshot of your workspace and post the link to it here so we can check it out.

Joseph Tavinor
Joseph Tavinor
8,397 Points

https://w.trhou.se/jpdzy6u75i

Here is the snapshot Steven Parker

1 Answer

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The "nth-child" and "nth-of-type" pseudo-classes only work with items that share the same parent. In this case, the items are at different nesting levels or in separate parent elements.

But a "querySelectorAll" using the class will still select them all, and then you can apply an index to the result to isolate a particular one of them.

Joseph Tavinor
Joseph Tavinor
8,397 Points

Thanks Stephen I understand what you're saying in principle, but not as it relates to this specific case.

Ok so the first container div is nested in a <nav> in the <body>; The 2nd container div is nested in a <div> in the <body>; The 3rd container div is nested directly in the <body>.

So they all have different parents, I don't quite understand the hierarchy thats grouping the first and 3rd container together but excluding the 2nd

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The first "container" div is also the first div in the nav (so "first of type").

The second "container" div is the first div in the "jumbotron" div (so also "first of type"). It's not selected because "querySelector" takes only the first matching element.

And the third "container" div is the second div in the body (so "second of type").

Joseph Tavinor
Joseph Tavinor
8,397 Points

Brilliant thanks Steven, I think I'll stick to querySelectorAll in these situations as recommended!

Jahnel Madarang
seal-mask
.a{fill-rule:evenodd;}techdegree
Jahnel Madarang
Full Stack JavaScript Techdegree Student 6,798 Points
Jahnel Madarang
.a{fill-rule:evenodd;}techdegree
Jahnel Madarang
Full Stack JavaScript Techdegree Student 6,798 Points

Hi Steven, My first thought was to use the "nth-child" pseudo-class and was confused as to why it wasn't working. Is there a way from the comments to easily tell that the items were nesting in separate parent elements? Or was the only way to know was to try first and since it didn't work, dig into the html to see that they are in separate parent elements? Thanks in advance for your help!

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

An excellent "best practice" is to use indentation to identify nesting level, as was done in the code of this workspace. Here's and excerpt from the workspace with indentation intact but with intervening lines removed:

    <nav class="navbar navbar-expand-lg">
      <div class="container">
        <!-- (other content omitted) -->
      </div>
    </nav>

    <div class="jumbotron jumbotron-fluid text-white">
      <div class="container text-sm-center pt-5">
        <!-- (other content omitted) -->
      </div>
    </div>

    <div class="container pt-4">
      <!-- (other content omitted) -->
    </div>

Note that the three div's with class "container" have no common parent. One is inside a "nav", another is inside a div with class "jumbotron", and the last one is by itself.