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 trialErik Nuber
20,629 Pointsnth-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
Treehouse TeacherHere'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
Erik Nuber
20,629 Pointsthat 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
229,204 PointsThe 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
6,324 PointsYeah 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
20,629 PointsThank 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 + "%");
}
}