Problems with :nth child - alter 1st column and 4th column

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. 

  1. <div id="bookgrid" class="grid_8 alpha">
  2.       <h2>Title</h2>
  3.       <div id="booksubnav" class="alpha"></div>

  4.       <div class="grid_2">content</div>
  5.       <div class="grid_2">content</div>
  6.       <div class="grid_2">content</div>
  7.       <div class="grid_2">content</div>

  8.       <div class="grid_2">content</div>
  9.       <div class="grid_2">content</div>
  10.       <div class="grid_2">content</div>
  11.       <div class="grid_2">content</div>
  12. </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:

  1. <div id="bookgrid" class="grid_8 alpha">
  2.       <h2>title</h2>
  3.       <div id="booksubnav" class="alpha"></div>

  4.       <div class="grid_2 alpha">content</div>
  5.       <div class="grid_2">content</div>
  6.       <div class="grid_2">content</div>
  7.       <div class="grid_2 omega">content</div>

  8.       <div class="grid_2 alpha">content</div>
  9.       <div class="grid_2">content</div>
  10.       <div class="grid_2">content</div>
  11.       <div class="grid_2 omega">content</div>
  12. </div>

I've tried the following with no luck for the implementation of "alpha"

  1. jQuery("#bookgrid > div.grid_2:nth-child(1)").addClass("alpha");
  2. jQuery("#bookgrid > div.grid_2:nth-child(4n+1)").addClass("alpha");

No luck so far. Any help would be appreciated.

Thanks,
Mike
    • Topic Participants

    • mike