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

CSS CSS Selectors Advanced Selectors :nth-of-type

Posted by Kirt Perez
Kirt Perez
7,374 Points

Possible bug in css :nth pseudo classes challenge?

After this video, we are presented two challenges that use the two variations of the :nth pseudo class in CSS. Even though you write the correct code, the preview area does not get changed at all unless I'm wrong on how it should behave?

Edit: It's seems that the issue is the way we have the media query set as default for us. Removing the media query or changing the value allows the styles the challenges want to be in affect. Also I think the preview window is too small for us to see what the clear property does.

Cameron Childres
Cameron Childres
11,820 Points
Cameron Childres
Cameron Childres
11,820 Points

Spot on Kirt, I could never get the challenge area to go above 600px or so without messing around in Chrome dev tools. Changing the media query values to view the changes you're making then changing it back to pass the challenge is a good way to get around this issue.

Wouldn't hurt to report this to support (help@teamtreehouse.com) with a link and a screenshot. If you're the first to report a bug you may even get a special exterminator badge :)

1 Answer

Bert Witzel
.a{fill-rule:evenodd;}techdegree seal-36
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 Points

Hi Kirt, yes I think you are right about the media query affecting the preview. The main point is that you get the code right though. Here was my solution:

/* Write the CSS in the media query below */

@media (min-width: 607px) {
  img {
    float: left;
  }

  img:nth-child(3n+4) {
    clear: left;
  }
}