Problems with :nth child - alter 1st column and 4th column
I have the following grid setup with 4 columns utilizing the 960 CSS Grid system.
- <div id="bookgrid" class="grid_8 alpha">
- <h2>Title</h2>
- <div id="booksubnav" class="alpha"></div>
- <div class="grid_2">content</div>
- <div class="grid_2">content</div>
- <div class="grid_2">content</div>
- <div class="grid_2">content</div>
- <div class="grid_2">content</div>
- <div class="grid_2">content</div>
- <div class="grid_2">content</div>
- <div class="grid_2">content</div>
- </div>
I'd like to use nth child to alter the above code to add "alpha" to the first column and "omega" to the 4th column like so:
- <div id="bookgrid" class="grid_8 alpha">
- <h2>title</h2>
- <div id="booksubnav" class="alpha"></div>
- <div class="grid_2 alpha">content</div>
- <div class="grid_2">content</div>
- <div class="grid_2">content</div>
- <div class="grid_2 omega">content</div>
- <div class="grid_2 alpha">content</div>
- <div class="grid_2">content</div>
- <div class="grid_2">content</div>
- <div class="grid_2 omega">content</div>
- </div>
I've tried the following with no luck for the implementation of "alpha"
- jQuery("#bookgrid > div.grid_2:nth-child(1)").addClass("alpha");
- jQuery("#bookgrid > div.grid_2:nth-child(4n+1)").addClass("alpha");
No luck so far. Any help would be appreciated.
Thanks,
Mike