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

Erik Nuber
Erik Nuber
20,629 Points
Posted by Erik Nuber
Erik Nuber
20,629 Points

nth-child or nth-of-type. Trying to select a certain pattern.

Given the following...

<div>
   <article>
        <a>
               <header>
                    <div class="TitleStuff">
                           <h1></h1>
                             <p></p>
                     </div>
                </header>
                 <div class="ImageStuff">
                            <img ">
                  </div>
          </a>
    </article>

 <article>
        <a>
               <header>
                    <div class="TitleStuff">
                           <h1></h1>
                             <p></p>
                     </div>
                </header>
                 <div class="ImageStuff">
                            <img ">
                  </div>
          </a>
    </article>

 <article>
        <a>
               <header>
                    <div class="TitleStuff">
                           <h1></h1>
                             <p></p>
                     </div>
                </header>
                 <div class="ImageStuff">
                            <img ">
                  </div>
          </a>
    </article>

 <article>
        <a>
               <header>
                    <div class="TitleStuff">
                           <h1></h1>
                             <p></p>
                     </div>
                </header>
                 <div class="ImageStuff">
                            <img ">
                  </div>
          </a>
    </article>
</div>

and so forth... I'm trying to select every other class of imageStuff.

I know you can't use :nth-child/:nth-of-type on a class but, I can't seem to figure out how to get at every other ImageStuff div tag with any combination.

I've tried various combinations of selectors using both ~ and > but that hasn't worked.

I've been so focused on using "nth of" that likely just adding another class to the those should also do the trick and, I'm not sure why I already hadn't thought of that.

5 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Here's a thought? JavaScript? Get all the elements with that class and read it into an array. Then if the index % 2 === 0 add your CSS? Or vice versa if you're looking for the odd ones, of course :smiley:

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

that could work too. I just added a new class and shoved the image to the right which is what I wanted. But your way won't break if images are added in.

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

The problem with nth-child or nth-of-type is that the both count the element number within a parent.

There's no facility in CSS to assign ordering to elements in different parents. But as Jennifer suggested, this is something that you can do in JavaScript (particularly easily with JQuery).

But if you can accomplish your objective by assigning additional classes, that's probably a better solution.

Kathryn Crawford
Kathryn Crawford
6,324 Points
Kathryn Crawford
Kathryn Crawford
6,324 Points

Yeah JS is your only way to do this. Nth-of-type/nth-child only select within a shared parent, and you can't use them to select classes unfortunately. I can't wait until they add nth-of-class (we can hope). For now, select the class, and then select every other one by iterating through my a for loop and incrementing by 2.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Thank You for all the replies. It was very simple and now it won't break. Though it is for my portfolio it is still good practice to think properly and use the proper tools.

This worked perfectly. Using Brackets which is quite strict so can't add the var i in the for loop otherwise would have done so.

var myImages = document.querySelectorAll(".miscImage"),
    i;

for (i = 0; i < myImages.length; i++) {
    if ((i + 1) % 2 === 0) {
        myImages[i].style.left = (50 + "%");
    }
}