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

Posted by Thomas Anderson
Thomas Anderson
1,474 Points

CSS in css/main.css is overriding css/responsive.css

The CSS in css/main.css is overriding my #gallery li:nth-child pseudoclass in my css/responsive.css. I believe that the responsive.css should override the main.css but I also may be wrong.

What is happening when my screen size is 480px, my pseudo-class is clearing the nth-child(3n) in the main.css and the nth-child(4n). Once the screen size hits 480px, shouldn't the nth-child(3n) in main.css stop and the nth-child(4n) in responsive.css override?

Here is my html

<link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

and

 <div id="wrapper">
      <section>
        <ul class="gallery" id="gallery">
          <li>
            <a href="bellinghambeyond.html">
              <img src="img/lk and ta humboldt house.jpg" alt="">
              <p>Bellingham and Beyond.</p>
            </a>
          </li>
          <li>
            <a href="openfrontier.html">
              <img src="img/mt_ranier.jpg" alt="">
              <p>Open Frontier.</p>
            </a>
          </li>
          <li>
            <a href="totheeast.html">
              <img src="img/KOREA.jpg" alt="">
              <p>Journey to the East... And Back.</p>
            </a>
          </li>
          <li>
            <a href="findingourpath.html">
              <img src="img/matts_birthday.jpg" alt="">
              <p>Finding our path.</p>
            </a>
          </li>
          <li>
            <a href="fromhereonout.html">
              <img src="img/lk and ta.jpg" alt="">
              <p>From here on out.</p>
            </a>
          </li>
        </ul>
      </section>

Here is the css for my css/main.css ``` #gallery li:nth-child(3n){ clear: left; }

Here is the css for my css/responsive.css

@media screen and (min-width: 480px) {

.gallery li:nth-child(4n){ clear: left; }

#gallery li:nth-child(4n){ clear: left; } }

Thomas Anderson
Thomas Anderson
1,474 Points

Well I bungled that Markdown snippet somehow.

1 Answer

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

The code for 3n will continue to run unless you "cancel it out". There are scenarios where you would not want a different nth-child (4n) to overwrite another nth-child (3n).

So you'll need to add:

#gallery li:nth-child(3n){ clear: none; }
Thomas Anderson
Thomas Anderson
1,474 Points

Thanks, Jeff! This has been bothering me for a while. I'm guessing this declaration goes in the responsive.css?

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

That's correct, put it right before the 4n styles. That way when you get to an element that shares both 4n and 3n (like the 12th element), you're 4n styles are applied.