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

JavaScript

Posted by Ben Taylor
Ben Taylor
902 Points

nth-of-type problem

Hi guys,

I'm having a real problem here.. It's with nth-of-type.. I'm using the grid system I learnt here at Treehouse and I have 6 columns of two.. so grid_2. i'm using nth-of-type to basically say for the first over every six, add the class "alpha" and for every 6th in the row add the class "omega".

I'm wanting to do it in jQuery, as I don't think there's enough browser support for CSS.. but my god it's just not working..

The code I'm using is..

$("div.grid_2:nth-of-type(7n+1)").addClass('alpha');
$("div.grid_2:nth-of-type(6n+1)").addClass('omega');

2 Answers

geoffrey
geoffrey
28,736 Points

Yes, I would do that this way so

$(function(){
    $("div.grid_2:nth-of-type(6n+1)").addClass('alpha');
    $("div.grid_2:nth-of-type(6n)").addClass('omega');
});

Check here;

Lastly, you mentionned there is not enough css support, could you explain it a bit further please ? On my side I won't use JQuery for it.

Ben Taylor
Ben Taylor
902 Points

I don't understand why that works in your example, but not on my site.. For me it's doing this..

1 2 3 4 5 omega 6 alpha 7 8 9 10 11 omega 12 alpha

which is obviously wrong..

and i was under the impression that doing nth stuff in CSS only worked in recent browsers, am I wrong?

geoffrey
geoffrey
28,736 Points

It probably doesn't work within your site because the divs where the class grid_2 is applied aren't all nested in the same div. At least, that could be a reason.

nth-of-type selectors are quite well supported, It really depends on the browsers you want to target. check on canIuse.

Ben Taylor
Ben Taylor
902 Points

This is my code...

<div class="container">
            <div class="grid_12 alpha omega">
                <div class="titleContainer">
                    <span class="title">Selected Discography</span>
                </div><!--titleContainer-->
            </div><!--grid_12-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
            <div class="grid_2">
                <img src="img/disc.jpg" border="0" class="disc" alt="" />
            </div><!--grid_2-->
        </div><!--container-->
            ```
Ben Taylor
Ben Taylor
902 Points

Geoffrey! It's just worked.. i basically closed the container div, and opened a new one exclusively for the grid_2 divs and it sorted it!

Now what were you suggesting? dump the jQuery and use CSS?

geoffrey
geoffrey
28,736 Points

nth selectors are 96.96% supported according to canIuse, so yes, I won't use JQuery for that kind of stuff.

Moreover, keep in mind that if ever you want to use some new CSS3 technologies hardly supported, there are libraries such as http://modernizr.com/ that can help you.

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Not sure to fully understand what you want but if you want to select every sixth item, the css selector used isn't right.

That should be that

$("div.grid_2:nth-of-type(6n)").addClass('omega');
/* 
This is going to select:
    6*0 = 0 nth element
    6*1 = 6 nth element
    6*2 = 12 nth element
and so on...
*/

You can check this here.

Ben Taylor
Ben Taylor
902 Points

Hey Geoffrey,

Let me explain how the treehouse grid system works.. it's 12 columns.. the first needs the class "alpha" added and the last needs "omega" added.. so I'm using grids of 2, so that'd mean 6 across in total.. and the first and 6th needs to be amended as shown below..

<div class="grid_2 alpha"></div>
<div class="grid_2"></div>
<div class="grid_2"></div>
<div class="grid_2"></div>
<div class="grid_2"></div>
<div class="grid_2 omega"></div>

But the code I'm using seems to get it right first time, then not do it properly or the next lot.. so i need 1st to have alpha and 6th to have omega.. then 7th to have alpha and 12th to have omega etc etc.. make sense?

Ben Taylor
Ben Taylor
902 Points

This is probably a stupid question, but how would I convert that working jQuery to css code then?

P.s. thank you so much for your help, a true lifesaver.