Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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
216,136 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.

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

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 + "%");
    }
}